HTML5 Cheat Sheet

HTML 5 Tags

Style Sheets:

Embedded: Defined within the head region of the document

<style>

element {

property: value;

}

</style>

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

element {

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:

  Space

< <

> >

& &

" "

Basics:

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>

<html>

<head>

</head>

<body>

</article>

</section>

</body>

</html>