HTML5 Cheat Sheet

HTML 5 Tags

Style Sheets:

  • Embedded: Defined within the head region of the document


element {

property: value;

property: value;



  • External: Defined in an external document "file_name.css" and referred to via link

element {

property: value;

property: value;


  • In-Line:

<tag style="property: value; property: value;">

Style Properties:

  • a: defines the default style of the link.

  • a:visited: Defines the style of the visited link.

  • a:hover: Defines the style of the link while the mouse is positioned over it.

  • background-color: "rrggbb"

  • background-image: Imports an image as the background to an object.

  • background-repeat: Will repeat the background along a row or column. Accepted values: repeat-x (row), repeat-y (column), no-repeat, repeat (default)

  • background-attachment: Specifies whether a background image scrolls or is fixed. Accepted values: scroll (default), fixed

  • background-position: Specifies where the background image is placed on the screen. Accepted values: repeat-x or repeat-y (only one value) & no-repeat (two values)

  • background-size: Defines the size of the background image. Accepted values: auto, contain, cover, width height -or- #px #px

  • border: "CSS Units of Measure" - Can be written in shortcut notation: "border: style color width"

  • border-style: Accepted values: ridge, dashed, double, inset, dotted, solid, groove, outset

  • border-color: "#rrggbb"

  • border-size:

  • border-radius: Defines the radius of the arch on the corners of an element

    • border-top-left-radius:

    • border-top-right-radius:

    • border-bottom-left-radius:

    • border-bottom-right-radius:

  • border-width: Accepted values: thin, medium, thick or "CSS Units of Measure"

  • clear: "left, right or both"

  • color: "Text Color"

  • float: "left or right"

  • font-family: "Arial, helvetica, veranda, sans-serif, Script, etc."

  • font-variant: "small-caps or normal"

  • font-weight: "lighter, normal, bold, bolder, 100-900"

  • font-size: "8 - infinite", any CSS Units of Measure

  • height: When height is added to the header, the text remains at the top of the element.

  • line-height: Defines the height of the line that the text occupies. Text occupies evenly above and below the text.

  • list-style-image: "upper-alpha, lower-alpha, upper-roman, lower-roman, lower-greek, upper-latin, lower-latin, decimal, decimal-leading-zero, none, or url(image.gif)"

  • margin: Specifies a margin to be applied to all four sides of an element - "CSS Units of Measure" or "auto"

  • margin-left: Specifies a margin to be applied only to the left side of an element - "CSS Units of Measure"

  • margin-right: Specifies a margin to be applied only to the right side of an element - "CSS Units of Measure"

  • margin-top: Specifies a margin to be applied only to the top of an element - "CSS Units of Measure"

  • margin-bottom: Specifies a margin to be applied only to the bottom of an element - "CSS Units of Measure"

  • overflow: "hidden, scroll, auto or visible"

  • padding: "px"

  • start: "Applied to the <ol> tag to specify a specific starting position"

  • text-align: "center, left, right or justify"

  • text-decoration: Defines whether text should or should not be underlined

  • text-indent: ##px;

  • text-shadow: "#px #px #px #rrggbb" Position 1 - how far down from the text the shadow should extend., Position 2 - how far the the right the shadow should extend, Position 3 - The size of the shadow, Position 4 - the color of the shadow.

  • url (fileName): Images applied through style sheets should be referenced in the property's value.

  • width: "CSS Units of Measure"

CSS Units of Measure:

  • Percent: 50% - relative size of its parent

  • Pixels: 10px - smallest unit of measure

  • Inches: 2in, 2.5in

  • Centimeters: 1cm, 1.5cm

  • Point: 12pt - Used by word processors - 72 pts per inch

  • Millimeters: 5mm

  • Picas: 1pc - 1 pica is equivalent to 12pt.

Special Characters:

&nbsp; Space

&lt; <

&gt; >

&copy; ©

&amp; &

&quot; "


  • Tags indicated in BLUE should be included on ALL web documents. They are the basic HTML tags.

  • Tags indicated in GREEN are optional container elements

<!DOCTYPE html>



<title> Your Name Here </title>

<meta charset="utf-8">



<header> </header>

<nav> </nav>





<aside> </aside>

<footer> </footer>



Vector: Mathematically Defined Points