CSS Quick Reference

B
Name Ver Values Initial Value Applies to
background [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'> ] | inherit See individual properties
This sets the background of a particular tag.
background-attachment scroll | fixed | inherit scroll
background-color <color> | transparent | inherit
background-image <url> | none | inherit transparent
background-position [ [ <percentage> | <length> ]{2,3} | [ [top|center|bottom] || [left|center|right] ] ] | inherit 0% 0% block-level & replaced elem.
background-repeat repeat | repeat-x | repeat-y | no-repeat | inherit repeat
border [ <'border-width'> || <'border-style'> || <'border-color'> ] | inherit See individual properties
border-collapse collapse | seperate | inherit collapse table/inline-table
border-color <color>{1,4} | transparent | inherit See individual properties
border-spacing <length> <length>? | inherit 0 table/inline-table
border-style <border-style>{1,4} | inherit See individual properties
border-top [ <'border-width'> || <'border-style'> || <'border-color'> ] | inherit See individual properties
border-right
border-bottom
border-left
border-top-color <color> | transparent | inherit the value of the 'color' property
border-right-color
border-bottom-color
border-left-color
border-top-style <border-style> | inherit | dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid See individual properties
border-right-style
border-bottom-style
border-left-style
border-top-width <border-width> | inherit medium
border-right-width
border-bottom-width
border-left-width
border-width <length>{1,4} | inherit See individual properties
border-radius 3 <radius>{1,4} 0 all elements
border-radius-bottomleft 3 <radius> 0 all elements
border-radius-bottomright
border-radius-topleft
border-radius-topright
bottom <length> | <percentage> | auto | inherit auto positioned elem.
C
Name Ver Values Initial Value Applies to
caption-side top | bottom | left | right | inherit top table-caption
clear none | left | right | both | inherit none block-level elem.
clip <shape> | auto | inherit auto block-level & replaced elem.
color <color> | inherit browser dependent
content [ <string> | <url> | <counter> | attr(X) | open-quote | close-quote | no-close-quote ]+ | inherit empth string :before & :after pseudo elem.
counter-increment [ <identifier> <integer>? ]+ | none | inherit none
counter-reset [ <identifier> <integer>? ]+ | none | inherit none
cursor [[<uri>,]* [auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize|s-resize | w-resize | text | wait | help] ] | inherit auto
D
Name Ver Values Initial Value Applies to
direction ltr | rtl | inherit ltr all elements
display inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit inline
E
Name Ver Values Initial Value Applies to
empty-cells show | hide | inherit show table-cell elem
F
Name Ver Values Initial Value Applies to
float left | right | none | inherit none
font [[ <'font-style'> || <'font-variant'> || <'font-wieight'>]? <'font-size'> [ | <'line-height'>? <'font-family'>] | caption | icon | menu | message-box | small-caption | status-bar | inherit See individual properties
font-family [ [ <family-name> | <generic-family>],]* [<family-name> | <generic-family>] | inherit browser dependent
font-size <absolute-size> | <relative-size> | <length> | <percentage> | inherit medium
font-size-adjust <number> | none | inherit none
font-stretch normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit normal
font-style normal | italic | oblique | inherit normal
font-variant normal | small-caps | inherit normal
font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit normal
H
Name Ver Values Initial Value Applies to
height <length> | <percentage> | auto | inherit auto
L
Name Ver Values Initial Value Applies to
left <length> | <percentage> | auto | inherit auto
letter-spacing normal | <length> | inherit normal
line-height normal | <number> | <length> | <percentage> | inherit normal
list-style [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit See individual properties
list-style-image <uri> | none | inherit none
list-style-position inside | outside | inherit outside
list-style-type disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiraganairoha | none | inherit disc
M
Name Ver Values Initial Value Applies to
margin <margin-width>{1,4} | auto | inherit 0
Use margin auto to centre non text elements
margin-top <margin-width> | auto | inherit 0
margin-right
margin-bottom
margin-left
marker-offset <length> | auto | inherit auto
marks [ crop || cross ] | none | inherit none
max-height <length> | <percentage> | none | inherit none
max-width <length> | <percentage> | none | inherit none
min-height <length> | <percentage> | inherit 0
min-width <length> | <percentage> | inherit browser dependent
-moz-border-radius <radius>{1,4} 0 all elements
Mozilla specific style, may become part of CSS3 sans the -moz-
-moz-border-radius-bottomleft <radius> 0 all elements
-moz-border-radius-bottomright
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-opacity <alphavalue> 1 all elements
Mozilla specific style, may become part of CSS3 sans the -moz-
O
Name Ver Values Initial Value Applies to
orphans <integer> | inherit 2
outline [ <'outline-color'> || <'outline-style'> || <'outline-width'>] | inherit See individual properties
outline-color <color> | invert | inherit invert
outline-style <border-style> | inherit none
outline-width <border-width> | inherit medium
overflow visible | hidden | scroll | auto | inherit visible
overflow-x visible | hidden | scroll | auto | inherit visible
overflow-y visible | hidden | scroll | auto | inherit visible
P
Name Ver Values Initial Value Applies to
padding <padding-width>{1,4} | inherit 0
padding-top <padding-width> | inherit 0
padding-right
padding-bottom
padding-left
page <identifier> | auto auto
page-break-after auto | always | avoid | left | right | inherit auto
page-break-before auto | always | avoid | left | right | inherit auto
page-break-inside avoid | auto | inherit auto
position static | relative | absolute | fixed | inherit static
Q
Name Ver Values Initial Value Applies to
quotes [ <string> <string>]+ | none | inherit browser dependent
R
Name Ver Values Initial Value Applies to
right <length> | <percentage> | auto | inherit auto
S
Name Ver Values Initial Value Applies to
size <length>{1,2} | auto | portrait | landscape | inherit auto
T
Name Ver Values Initial Value Applies to
table-layout auto | fixed | inherit auto
text-align left | right | center | <string> | inherit 7)
text-decoration none | [underline || overline || line-through|| blink ] | inherit none
text-indent <length> | <percentage> | inherit 0
text-shadow none | [ <color> || <length><length><length>?,]* [<color> || <length><length><length>?] | inherit none
text-transform capatlize | uppercase | lowercase | none | inherit none
top <length> | <percentage> | auto | inherit auto
U
Name Ver Values Initial Value Applies to
unicode-bidi normal | embed | bidi-overide | inherit none
V
Name Ver Values Initial Value Applies to
vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit baseline
visibility visible | hidden | collapse | inherit inherit
W
Name Ver Values Initial Value Applies to
white-space normal | pre | nowrap | inherit normal
windows <integer> | inherit 2
width <length> | <percentage> | auto | inherit auto
word-spacing normal | <length> | inherit normal
Z
Name Ver Values Initial Value Applies to
z-index auto | <integer> | inherit auto
zoom <scale> | <percentage> | normal normal all elements
CSS Units
Unit Values
<color> colour name, #ABC, #0F00F0, rgb(15, 0, 240), rgb(6%, 0%, 94%)
<length> Absolute: in, cm, mm, pi, pt Relative: px, em, ex
<percent> %
<scale> ?
<URI> or <URL> url("actualURL")
<generic-family> serif, sans-serif, ...
AT-Rules
Rule Syntax Description
@charset @charset "characterset" eg @charset "utf-8"
@font-face
@import @import url(URL); Imports an external css file into the current file's rules
@media @media type { type styles }
Type Description
all Used for all media type devices
aural Used for speech and sound synthesizers
braille Used for braille tactile feedback devices
embossed Used for paged braille printers
handheld Used for small or handheld devices
print Used for printers
projection Used for projected presentations, like slides
screen Used for computer screens
tty Used for media using a fixed-pitch character grid, like teletypes and terminals
tv Used for television-type devices
@page
Element Selectors
Selector Ver Description Name
[Prefix]|[Elem1] Matches Elem1 with the [Prefix] namespace prefix Namespace Selector
"*" Matches any element Universal Selector
[Elem] Matches specified Element name Simple Element Selector
[Elem1] S+ [Elem2] Elem1 is the direct or indirect ancestor of Elem2 Descendent Selectors
[Elem1] ">" [Elem2] Elem1 is the direct parent of Elem2 Child Selectors
[Elem1] "+" [Elem2] Elem1 and Elem2 share the same direct parent AND are next to each other in the document tree Adjacent Selectors
Attribute Selectors
Selector Ver Description Name
[Attr] or Elem[Attr] 2.1 Matches all elements with the specified attribute or all 'Elem's with the specified attribute Simple Attribute Selector
[Attr="value"] or Elem[Attr="value"] 2.1 Matches all elements that exactly match the specified attribute/value or all 'Elem's with the specified attribute/value Attribute Value Selector
[Attr^="value"] or Elem[Attr^="value"] 2.1 Matches all elements with the specified attribute that BEGIN with the specified value. This selector would match attribute values that are equal to it as well as to longer values of which it is a substring. "Begins-with" Attribute Value Selector
[Attr$="value"] or Elem[Attr$="value"] 2.1 Matches all elements with the specified attribute that END with the specified value. This selector would match attribute values that are equal to it as well as to longer values of which it is a substring. "Ends-with" Attribute Value Selector
[Attr*="value"] or Elem[Attr*="value"] 2.1 Matches all element/attribute combinations that have at least one occurrence of the indicated value as a substring. Substring-match Attribute Value Selector
[Attr~="value"] or Elem[Attr~="value"] 2.1 Allows a portion of an attribute value to be exactly matched where the portions are separated by spaces. One-of-many Attribute Value Selector
[Attr|="value"] or Elem[Attr|="value"] 2.1 The attribute value is a hyphen-separated list and begins with "value" Hyphen Attribute Value Selector
[Prefix|Attr="value"] or Elem[Prefix|Attr="value"] 2.1 The attribute is in the specified Namespace prefix. Namespace Attribute Selector
E:root 3 Matches the document's root element. In HTML, the root element is always the HTML element. Structural pseudo-class
E:nth-child(n) 3 Matches any E element that is the n-th child of its parent. Structural pseudo-class
E:nth-last-child(n) 3 Matches any E element that is the n-th child of its parent, counting from the last child. Structural pseudo-class
E:nth-of-type(n) 3 Matches any E element that is the n-th sibling of its type. Structural pseudo-class
E:nth-last-of-type(n) 3 Matches any E element that is the n-th sibling of its type, counting from the last sibling. Structural pseudo-class
E:last-child 3 Matches any E element that is the last child of its parent. Structural pseudo-class
E:first-of-type 3 Matches any E element that is the first sibling of its type. Structural pseudo-class
E:last-of-type 3 Matches any E element that is the last sibling of its type. Structural pseudo-class
E:only-child 3 Matches any E element that is the only child of its parent. Structural pseudo-class
E:only-of-type 3 Matches any E element that is the only sibling of its type. Structural pseudo-class
E:empty 3 Matches any E element that has no children (including text nodes). Structural pseudo-class
E:target 3 Matches an E element that is the target of the referring URL. Target pseudo-class
E:enabled 3 Matches any user interface element (form control) E that is enabled. UI element states pseudo-class
E:disabled 3 Matches any user interface element (form control) E that is disabled. UI element states pseudo-class
E:checked 3 Matches any user interface element (form control) E that is checked. UI element states pseudo-class
E::selection 3 Matches the portion of an element E that is currently selected or highlighted by the user. UI element fragments pseudo-element
E:not(s) 3 Matches any E element that does not match the simple selector s. Negation pseudo-class
E ~ F 3 Matches any F element that is preceded by an E element. General sibling combinator
Special HTML Selectors
Selector Ver Description Name
.[Class Name] Matches elements with CLASS attributes carrying a [Class Name] value Class Selector
#[ID Name] Matches the element carrying the unique ID attribute value of [ID Name] ID Selector
Pseudo-Element Selectors
Selector Ver Description Name
[Elem]:before Addresses content that is generated before an element Before
[Elem]:after Addresses content that is generated after an element After
[Elem]:first-letter Indicates the first rendered letter/character for a block-level element First-letter
[Elem]:first-line Indicates the first rendered line on the output device of a block-level element First-line
Pseudo-Class Selectors
Selector Ver Description Name
A:link Applies to an unvisited hyperlink Link
A:visited Applies to a visited hyperlink Visited
[Elem]:first-child Applies to the first child/descendent of an element First-child
[Elem]:active The state during pointer activation ( eg: press and release of a mouse) Active
[Elem]:hover The state during pointer movement within the rendering region of an element Hover
[Elem]:focus The state during which an element accepts keyboard input Focus
[Elem]:lang([Code]) The selector content uses the specified language Lang

Valid XHTML 1.0!