HTML & CSS Example Toolbox

Heading examples

h1 through h6 tags are used to define titles and subtitles on a webpage. The h1 title is the most important title and largest while the rest are not as important and get smaller on the 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 hyperlink to the Adobe website
This is a hyperlink to an anchor within the same webpage. Anchors can use containers that have ID's tied to them.

CSS pseudo-classes are fun and can be just as responsive as any other hyperlink.

This is a link

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.

Note: a:active MUST come after a:hover in the CSS definition in order to be effective.

This is an example of a table

This is an example of a table. Tables have important information on them.


Firtstname Lastname Age
Jill Smith 50
Eve Jackson 94

Lists

This is an example of lists. Ordered lists have numbers and unordered lists do not.

    This is an ordered list

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4

This is an example of an image

Images can be embedded into webpages from other sources.

" abstract image


Male Female


The hr tag creates a horizontal rule that spans all the way across the page unless it gets styled differently.

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 background and font

You can set the 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 incude dotted, dashed, solid, double, groove, ridge, inset, and outset. You can set the entire border or just one side of a 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.

Floating container

This container has a float to the right value.

Creating 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, left, or right individually as well. The margin properties are 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 create space around an element.

CSS Font Decleration Properties Examples

Google Fonts

To use Google Fonts you have to link to the Google font style sheet or use the import command in the CSS style sheet. The font in this paragraph is a Google font using the link in the 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",

Monospace Fonts

"Courier New", Courier, "Lucida Console", Monaca

Underlining Text

Use 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). HTML Tutorials. Retrieved from: https://www.w3schools.com/default.asp

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