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 define the least important title normally a subtitles or even caption on a page.

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 a hyperlink to the Adobe offical website

This is a hyperlink to an anchor within the same webpage

List Examples

This 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 undordered list. Unorderlists by default have bullets infront of each item.

Line item 1
Line item 2
Line item 3

This is an example of a webform

Changing the size of containers and fonts!

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

You can change the height of the 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 font

You can set teh background color of a container using the background-color CSS property in the declaration. Background colors can be hexadecimal 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 hexadecimal 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 enitre 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.

This is an example of floating a styled div tag!

This div tag is floating to the right!

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 thte top, bottom, right, and left individually as well. The margin property is used to creat space around elements, outside of any defined border

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 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, Helverica, "Arial Black", Gadget,"Comic Sans MS", cursive, Impact, Charcoal, "Lucida Sans Unicode", "Lucida Grande", Tahoma, Geneva, "Trebuchet MS", Helvetica, 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.

Change the Font Style

Use the "font-style: italic; or font-style: normal; or font-style: oblique;" to adjust.

Changing the Variant of Text

Use the font-variant: small; caps; or initial; to adjust

Changing Text to Uppercase

Use the text-transform: capitalize or uppercase, lowercase, inital, or inherit to adjust

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