W3C

Quick Reference to Cascading Style Sheets, level 1

This version is based on:
http://www.w3.org/pub/WWW/TR/WD-css1-960911.html
Latest version:
http://www.w3.org/pub/WWW/TR/WD-css1.html
Author:
Steven Pemberton (Steven.Pemberton@cwi.nl)

Syntax

a b c
a is followed by b is followed by c, in that order.
a | b
either a or b must occur
a || b
either a or b or both must occur, in any order
[a b]
brackets, used for grouping
a?
a is optional
a*
a is repeated 0 or more times
a+
a is repeated 1 or more times
a{1,4}
a is repeated at least once and at most 4 times.
Juxtaposition is stronger than the double bar, and the double bar is stronger than the bar. Thus "a b | c || d e" is equivalent to "[ a b ] | [ c || [ d e]]".

Definitions

Block-level elements
an element which has a line break before and after (e.g. <H1>, <P>)
Replaced element
An element which is replaced by content pointed to from the element. E.g., <IMG>.

Properties

In each definition
5.2.2 font-family
[[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Initial: UA specific
<generic-family>
serif | sans-serif | cursive | fantasy | monospace
5.2.3 font-style
normal | italic | oblique
5.2.4 font-variant
normal | small-caps
5.2.5 font-weight
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
5.2.6 font-size
<absolute-size> | <relative-size> | <length> | <percentage>
Initial: medium
Percentage values: relative to parent element's font size
<absolute-size>
xx-small | x-small | small | medium | large | x-large | xx-large
<relative-size>
larger | smaller
5.2.7 font
<font-size> [ / <line-height> ]? <font-family>
Initial: not defined
Percentage values: allowed on <font-size> and <line-height>
5.3.1 color
<color>
Initial: UA specific
5.3.2 background*
transparent | <color> || <url> || <repeat> || <scroll> || <position>
Percentage values: refer to the dimension of the element itself
<repeat>
repeat | repeat-x | repeat-y | no-repeat
<scroll>
fixed | scroll
<position>
[<percentage> | <length> [<percentage> | <length> ]?] | [top | center | bottom] || [left | center | right]
Initial: 0% 0%
5.4.1 word-spacing
normal | <length>
5.4.2 letter-spacing
normal | <length>
5.4.3 text-decoration*
none | [ underline | overline | line-through | blink ]+
Inherited: no, but see clarification below
5.4.4 vertical-align*
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Applies to: inline and replaced elements
Percentage values: refer to the 'line-height' of the element itself
5.4.5 text-transform
capitalize | uppercase | lowercase | none
5.4.6 text-align
left | right | center | justify
Applies to: block-level elements
Initial: UA specific
5.4.7 text-indent
<length> | <percentage>
Applies to: block-level elements
Initial: 0
Percentage values: refer to parent element's width
5.4.8 line-height
<number> | <length> | <percentage>
Applies to: all elements except replaced elements
Initial: UA specific
Percentage values: relative to the font size of the element itself
5.5.1 margin-left-margin-right-margin-top-margin-bottom-margin*
[ <length> | <percentage> | auto ]{1,4} (for 'margin' property)
Initial: 0
Percentage values: refer to parent element's width
5.5.2 padding*
[ <length> | <percentage> | auto ]{1,4} (for 'padding' only)
Initial: 0
Percentage values: refer to parent element's width
5.5.3 border-top-border-right-border-bottom-border-left-border*
<border-width> || <border-style> || <color>
Initial: medium none
<border-width>
thin | medium | thick | <length>
<border-style>
none | dotted | dashed | solid | double | groove | ridge | inset | outset
5.5.4 width*
<length> | <percentage> | auto
Applies to: block-level and replaced elements
Initial: auto, except for elements with an intrinsic dimension
Percentage values: refer to parent element's width
5.5.5 height*
<length> | auto
Applies to: block-level and replaced elements
5.5.6 float*
left | right | none
5.5.7 clear*
none | left | right | both
5.6.1 display*
block | inline | list-item | none
Initial: according to HTML
5.6.2 list-style
<keyword> || <position> || <url>
Applies to: elements with 'display' property value 'list-item'
Initial: disc outside
<keyword>
disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
<position>
inside | outside
5.6.3 white-space
normal | pre | nowrap
Applies to: block-level elements
Initial: according to HTML

Lengths

<length>
[+|-]?<number><unit>
<number>
<digit>+[.<digit>*]?
<unit>
<absolute-unit> | <relative-unit>
<absolute-unit>
mm | cm | in | pt | pc
<relative-unit>
em | ex | px
<percentage>
<number>%

Colors

<color>
<color-name> | <rgb>
<color-name>
aqua | black | blue | fuchsia | gray | green | lime | maroon | navy | olive | purple | red | silver | teal | white | yellow
<rgb>
#<hex><hex><hex> |
#<hex><hex><hex><hex><hex><hex> |
rgb(<number>, <number>, <number>) |
rgb(<percentage><percentage><percentage>)

URLs

<url>
url(<text>)