CSS 2.1 Property Cheat-Sheet

This is a sort of quick reference to CSS that I generated from the CSS grammar -- specifically, the CSS 2.1 property index, such as is found at http://www.w3.org/TR/CSS21/propidx.html , which you should refer to in the several cases where the following entries aren't self-explanatory.

Remember to check your CSS with the Validator: http://jigsaw.w3.org/css-validator/

-- Sean M. Burke, sburke@cpan.org


azimuth: 89deg | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards ;

background-attachment: scroll;
background-attachment: fixed;

background-color: #ef1234;
background-color: transparent;

background-image: http://whatever/thingy.dat;
background-image: none;

background-position: [ [78% | .34em | top | center | bottom] || [78% | .34em | left | center | right] ] ;

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

background: value_for_background-color;
background: value_for_background-image;
background: value_for_background-repeat;
background: value_for_background-attachment;
background: value_for_background-position;

border-collapse: collapse;
border-collapse: separate;

border-color: [ #ef1234 | transparent ]{1,4} ;

border-spacing: .34em;
border-spacing: .34em?;

border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset{1,4};

border-top: thin;
border-top: thick;
border-top: medium;
border-top: .34em;
border-top: none;
border-top: hidden;
border-top: dotted;
border-top: dashed;
border-top: solid;
border-top: double;
border-top: groove;
border-top: ridge;
border-top: inset;
border-top: outset;
border-top: value_for_border-top-color;

border-right: thin;
border-right: thick;
border-right: medium;
border-right: .34em;
border-right: none;
border-right: hidden;
border-right: dotted;
border-right: dashed;
border-right: solid;
border-right: double;
border-right: groove;
border-right: ridge;
border-right: inset;
border-right: outset;
border-right: value_for_border-top-color;

border-bottom: thin;
border-bottom: thick;
border-bottom: medium;
border-bottom: .34em;
border-bottom: none;
border-bottom: hidden;
border-bottom: dotted;
border-bottom: dashed;
border-bottom: solid;
border-bottom: double;
border-bottom: groove;
border-bottom: ridge;
border-bottom: inset;
border-bottom: outset;
border-bottom: value_for_border-top-color;

border-left: thin;
border-left: thick;
border-left: medium;
border-left: .34em;
border-left: none;
border-left: hidden;
border-left: dotted;
border-left: dashed;
border-left: solid;
border-left: double;
border-left: groove;
border-left: ridge;
border-left: inset;
border-left: outset;
border-left: value_for_border-top-color;

border-top-color: #ef1234;
border-top-color: transparent;

border-right-color: #ef1234;
border-right-color: transparent;

border-bottom-color: #ef1234;
border-bottom-color: transparent;

border-left-color: #ef1234;
border-left-color: transparent;

border-top-style: none;
border-top-style: hidden;
border-top-style: dotted;
border-top-style: dashed;
border-top-style: solid;
border-top-style: double;
border-top-style: groove;
border-top-style: ridge;
border-top-style: inset;
border-top-style: outset;

border-right-style: none;
border-right-style: hidden;
border-right-style: dotted;
border-right-style: dashed;
border-right-style: solid;
border-right-style: double;
border-right-style: groove;
border-right-style: ridge;
border-right-style: inset;
border-right-style: outset;

border-bottom-style: none;
border-bottom-style: hidden;
border-bottom-style: dotted;
border-bottom-style: dashed;
border-bottom-style: solid;
border-bottom-style: double;
border-bottom-style: groove;
border-bottom-style: ridge;
border-bottom-style: inset;
border-bottom-style: outset;

border-left-style: none;
border-left-style: hidden;
border-left-style: dotted;
border-left-style: dashed;
border-left-style: solid;
border-left-style: double;
border-left-style: groove;
border-left-style: ridge;
border-left-style: inset;
border-left-style: outset;

border-top-width: thin;
border-top-width: thick;
border-top-width: medium;
border-top-width: .34em;

border-right-width: thin;
border-right-width: thick;
border-right-width: medium;
border-right-width: .34em;

border-bottom-width: thin;
border-bottom-width: thick;
border-bottom-width: medium;
border-bottom-width: .34em;

border-left-width: thin;
border-left-width: thick;
border-left-width: medium;
border-left-width: .34em;

border-width: thin;
border-width: thick;
border-width: medium;
border-width: .34em{1,4};

border: thin;
border: thick;
border: medium;
border: .34em;
border: none;
border: hidden;
border: dotted;
border: dashed;
border: solid;
border: double;
border: groove;
border: ridge;
border: inset;
border: outset;
border: value_for_border-top-color;

bottom: .34em;
bottom: 78%;
bottom: auto;

caption-side: top;
caption-side: bottom;

clear: none;
clear: left;
clear: right;
clear: both;

clip: rect(5px,;
clip: 40px,;
clip: 45px,;
clip: 5px);;
clip: auto;

color: #ef1234;

content: normal | [ "Stuff" | counter(par-num, upper-roman) | attr(SomeName) | open-quote | close-quote | no-open-quote | no-close-quote ]+ ;

counter-increment: [ SomeName 123? ]+ | none ;

counter-reset: [ SomeName 123? ]+ | none ;

cue-after: http://whatever/thingy.dat;
cue-after: none;

cue-before: http://whatever/thingy.dat;
cue-before: none;

cue: value_for_cue-before;
cue: value_for_cue-after;

cursor: [ [http://whatever/thingy.dat ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] ;

direction: ltr;
direction: rtl;

display: inline;
display: block;
display: list-item;
display: run-in;
display: inline-block;
display: table;
display: inline-table;
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-column-group;
display: table-column;
display: table-cell;
display: table-caption;
display: none;

elevation: 89deg;
elevation: below;
elevation: level;
elevation: above;
elevation: higher;
elevation: lower;

empty-cells: show;
empty-cells: hide;

float: left;
float: right;
float: none;

font-family: [[ "Tahoma" | sans-serif ] [, "Tahoma"| sans-serif]* ] ;

font-size: 12px;
font-size: larger;
font-size: smaller;
font-size: .34em;
font-size: 78%;

font-style: normal;
font-style: italic;
font-style: oblique;

font-variant: normal;
font-variant: small-caps;

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

font: [ [ value_for_font-style || value_for_font-variant || value_for_font-weight ]? value_for_font-size [ / value_for_line-height ]? value_for_font-family ] | caption | icon | menu | message-box | small-caption | status-bar ;

height: .34em;
height: 78%;
height: auto;

left: .34em;
left: 78%;
left: auto;

letter-spacing: normal;
letter-spacing: .34em;

line-height: normal;
line-height: 87;
line-height: .34em;
line-height: 78%;

list-style-image: http://whatever/thingy.dat;
list-style-image: none;

list-style-position: inside;
list-style-position: outside;

list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: decimal-leading-zero;
list-style-type: lower-roman;
list-style-type: upper-roman;
list-style-type: lower-latin;
list-style-type: upper-latin;
list-style-type: none;

list-style: value_for_list-style-type;
list-style: value_for_list-style-position;
list-style: value_for_list-style-image;

margin-right: .34em;
margin-right: 78%;
margin-right: auto;

margin-left: .34em;
margin-left: 78%;
margin-left: auto;

margin-top: .34em;
margin-top: 78%;
margin-top: auto;

margin-bottom: .34em;
margin-bottom: 78%;
margin-bottom: auto;

margin: .34em;
margin: 78%;
margin: auto{1,4};

max-height: .34em;
max-height: 78%;
max-height: none;

max-width: .34em;
max-width: 78%;
max-width: none;

min-height: .34em;
min-height: 78%;

min-width: .34em;
min-width: 78%;

orphans: 123;

outline-color: #ef1234;
outline-color: invert;

outline-style: none;
outline-style: hidden;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

outline-width: thin;
outline-width: thick;
outline-width: medium;
outline-width: .34em;

outline: value_for_outline-color;
outline: value_for_outline-style;
outline: value_for_outline-width;

overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;

padding-top: 23px;

padding-right: 23px;

padding-bottom: 23px;

padding-left: 23px;

padding: 23px{1,4};

page-break-after: auto;
page-break-after: always;
page-break-after: avoid;
page-break-after: left;
page-break-after: right;

page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;

page-break-inside: avoid;
page-break-inside: auto;

pause-after: 789ms;
pause-after: 78%;

pause-before: 789ms;
pause-before: 78%;

pause: [ [789ms | 78%]{1,2} ] ;

pitch-range: 87;

pitch: 987Hz;
pitch: x-low;
pitch: low;
pitch: medium;
pitch: high;
pitch: x-high;

play-during: http://whatever/thingy.dat [ mix || repeat ]? | auto | none ;

position: static;
position: relative;
position: absolute;
position: fixed;

quotes: ["Stuff" "Stuff"]+ | none ;

richness: 87;

right: .34em;
right: 78%;
right: auto;

speak-header: once;
speak-header: always;

speak-numeral: digits;
speak-numeral: continuous;

speak-punctuation: code;
speak-punctuation: none;

speak: normal;
speak: none;
speak: spell-out;

speech-rate: 87;
speech-rate: x-slow;
speech-rate: slow;
speech-rate: medium;
speech-rate: fast;
speech-rate: x-fast;
speech-rate: faster;
speech-rate: slower;

stress: 87;

table-layout: auto;
table-layout: fixed;

text-align: left;
text-align: right;
text-align: center;
text-align: justify;

text-decoration: none | [ underline || overline || line-through || blink ] ;

text-indent: .34em;
text-indent: 78%;

text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;

top: .34em;
top: 78%;
top: auto;

unicode-bidi: normal;
unicode-bidi: embed;
unicode-bidi: bidi-override;

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: top;
vertical-align: text-top;
vertical-align: middle;
vertical-align: bottom;
vertical-align: text-bottom;
vertical-align: 78%;
vertical-align: .34em;

visibility: visible;
visibility: hidden;
visibility: collapse;

voice-family: [[Kevin | male ],]* [Kevin | male ] ;

volume: 87;
volume: 78%;
volume: silent;
volume: x-soft;
volume: soft;
volume: medium;
volume: loud;
volume: x-loud;

white-space: normal;
white-space: pre;
white-space: nowrap;
white-space: pre-wrap;
white-space: pre-line;

widows: 123;

width: .34em;
width: 78%;
width: auto;

word-spacing: normal;
word-spacing: .34em;

z-index: auto;
z-index: 123;