Heading Examples

HTML headings are titles or subtitles that you want to display on a webpage. HTML headings are defined with the h1 to h6 tags. h1 defines the most important heading. h6 defines the least important heading.

This is an example of an h1 tag/element.

This is an example of an h2 tag/element.

This is an example of an h3 tag/element.

This is an example of an h4 tag/element.

This is an example of an h5 tag/element.

This is an example of an h6 tag/element.

Hyperlink Examples

This is the hyperlink to the DECIEM website

This is a hyperlink to an anchor with the same webpage. Anchors use container IDs to link to.

List Examples

This is an example of an Ordered List. Ordered Lists by default have sequential numbering.

Line item 1
Line item 2
Line item 3

This is an example of an Unordered List. Unordered Lists by default have bullets in front of each listed item.

Line item 1
Line item 2
Line item 3

Web Form

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 headingsusing 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 bakground-color CSS property in the declaration. Background colors can be hexadecimal numbers, RGBa 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 hexadecimal numbers, RGB numbers, or color names.

Creating a border around the 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 a floating a styled div tag

This div tag is floating to the right

Creating a space around a container.

This div tag has a margin of 20px set on all four sides. You can set the margin of the entire container using the margin CSS property in the declaration or set the top, bottom, right, left individually as well. The margin properties is used to create space around elements, outside of any defined borders.

Padding can be added to any element. This container has a padding of 20px added to it. The padding property is used to generate space around an element's content, inside of the defined border.

CSS Font Declaration Property 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 Type", "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", Verdana

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 the text bold.

Changing 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

Changing text to uppercase

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

References

W3Schools (2020). 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.asp