Heading Examples

h1 - h6 tags are used to define titles and subtitles on a webpage. The h1 tag defines the most important heading/title on the page. The h6 tags defines the least important title normally a subtitle or even caption on a page.

This is an example of an H1 tag

This is an example of an H2 tag

This is an example of an H3 tag

This is an example of an H4 tag

This is an example of an H5 tag

This is an example of an H6 tag

Hyperlink Examples

This is a link to a popular image site
This links to another section of this page

Examples of ordered and unordered lists

numbered list 1
numbered list 2
numbered list 3
numbered list 4

bulleted list 1
bulleted list 2
bulleted list 3
bulleted list 4

Changing the size of containers and fonts

You can change the width of a container using the width CSS property in the declaration.

You can change the height of a container using the height CSS property in the declaration.

You can change the font size of text and headings using the font-size CSS property in the declaration.

Setting the color of backgrounds and fonts

You can set the background color of a container using the background-color CSS property in the declaration. Background colors can be hexidecimal numbers, RGB numbers, or color names

You can set the font color of text and headings using the color CSS property in the declaration. text colors can be hexidecimal numbers, RGB numbers, or color names

Creating a border around a container

You can set the border properties of any container using CSS. CSS allows you to set the border width, style, and color. Border styles include dotted, dashed, solid, double, groove, ridge, inset, and outset. You can set the entire border or just one side of the container (top, bottom, left, right), using CSS properties such as border-right in the declaration. This div container is styled using the double border style.

Example of Floating container

Container floating to the right

Creating space around a container

This div tag has a margin of 20px on all sides

This div tag has a padding of 20px on it

CSS Font declaration Properties Examples

Google fonts

To use Google fonts you have to link to the Google font style sheet or using the @import command in your CSS style sheet. The font in this paragraph is a Google font using the link in head content to link Google's style sheet

Web Safe Fonts

Serif Fonts

Georgia, "Palatino Linotype", "Book Antiqua", Palatino,"Times New Roman", Times,

Sans-Serif Fonts

Arial, Helvetica,"Arial Black", Gadget,"Comic Sans MS", cursive, Impact, Charcoal,"Lucida Sans Unicode", "Lucida Grande",Tahoma, Geneva,"Trebuchet MS", Helvetica,Verdana, Geneva

Monospace Fonts

"Courier New", Courier,"Lucida Console", Monaco

Underlining Text

Use the text-decoration:underline in the declaration

Changing the Font Weight

Use the font-weight:bold to make text bold

Change the Font Style

Use the font-style:italic or normal or oblique

Changing the Variant of Text

Use the font-variant:small-caps or initial, or inherit

Changing Text to Uppercase

Use the text-transform:capitalize or uppercase, lowercase, initial, or inherit

References

W3Schools (2020). other sides hopefully Probably not enough text to fill? HTML Tutorials. Retrieved from W3Schools. Website: https://www.w3schools.com/html/default.asp

W3Schools (2020). CSS Tutorials. Retrieved from W3Schools. Website: https://www.w3schools.com/css/default.as