P { font-family: "New Century Schoolbook", Times, serif }

• <absolute-size>
  • xx-small | x-small | small | medium | large | x-large | xx-large
• <relative-size>
  • larger | smaller
• <length>
• <percentage> (in relation to parent element)

H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }

BODY { background-color: white }
H1   { background-color: #000080 }

BODY { background-image: url(/graphics/foo.gif) }
P    { background-image: url(http://www.htmlhelp.com/bg.png) }

BODY { background: white url(candybar.gif);
       background-repeat: repeat-x }

BODY { background: white url(candybar.gif);
       background-attachment: fixed }

• Horizontal keywords (left, center, right)
• Vertical keywords (top, center, bottom)

• top left = left top = 0% 0%
• top = top center = center top = 50% 0%
• right top = top right = 100% 0%
• left = left center = center left = 0% 50%
• center = center center = 50% 50%
• right = right center = center right = 100% 50%
• bottom left = left bottom = 0% 100%
• bottom = bottom center = center bottom = 50% 100%
• bottom right = right bottom = 100% 100%

BODY       { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P          { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
TABLE      { background: #0c0 url(leaves.jpg) no-repeat bottom right }

P EM   { word-spacing: 0.4em }
P.note { word-spacing: -0.2em }

H1     { letter-spacing: 0.1em }
P.note { letter-spacing: -0.1em }

A:link, A:visited, A:active { text-decoration: none }

IMG.middle { vertical-align: middle }
IMG        { vertical-align: 50% }
.exponent  { vertical-align: super }

• baseline (align baselines of element and parent)
• middle (align vertical midpoint of element with baseline plus half the x-height--the height of the letter "x"--of the parent)
• sub (subscript)
• super (superscript)
• text-top (align tops of element and parent's font)
• text-bottom (align bottoms of element and parent's font)

• top (align top of element with tallest element on the line)
• bottom (align bottom of element with lowest element on the line)

H1 { text-transform: uppercase }
H2 { text-transform: capitalize }

• capitalize (capitalizes first character of each word)
• uppercase (capitalizes all characters of each word)
• lowercase (uses small letters for all characters of each word)
• none (the initial value)

H1          { text-align: center }
P.newspaper { text-align: justify }

P { text-indent: 5em }

P { line-height: 200% }

Microsoft Internet Explorer 3.x incorrectly treats number values and values with em or ex units as pixel values. This bug can easily make pages unreadable, and so authors should avoid provoking it wherever possible; percentage units are often a good choice.

BODY { margin-top: 0 }

P.narrow { margin-right: 50% }

DT { margin-bottom: 3em }

ADDRESS { margin-left: 50% }

BODY { margin: 5em }             /* all margins 5em */
P    { margin: 2em 4em }         /* top and bottom margins 2em,
                                    left and right margins 4em */
DIV  { margin: 1em 2em 3em 4em } /* top margin 1em,
                                    right margin 2em,
                                    bottom margin 3em,
                                    left margin 4em */

BLOCKQUOTE { padding: 2em 4em 5em }

H2        { border: groove 3em }
A:link    { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active  { border: thick double red }

INPUT.button { width: 10em }

IMG.foo { width: 40px; height: 40px }

• block (a line break before and after the element)
• inline (no line break before and after the element)
• list-item (same as block except a list-item marker is added)
• none (no display)

• normal (collapses multiple spaces into one)
• pre (does not collapse multiple spaces)
• nowrap (does not allow line wrapping without a <BR> tag)

LI.square { list-style-type: square }
UL.plain  { list-style-type: none }
OL        { list-style-type: upper-alpha }  /* A B C D E etc. */
OL OL     { list-style-type: decimal }      /* 1 2 3 4 5 etc. */
OL OL OL  { list-style-type: lower-roman }  /* i ii iii iv v etc. */

UL.check { list-style-image: url(/LI-markers/checkmark.gif) }
UL LI.x  { list-style-image: url(x.png) }

Outside rendering:
 * List item 1
   second line of list item

Inside rendering:
   * List item 1
   second line of list item

LI.square { list-style: square inside }
UL.plain  { list-style: none }
UL.check  { list-style: url(/LI-markers/checkmark.gif) circle }
OL        { list-style: upper-alpha }
OL OL     { list-style: lower-roman inside }