Name of Property |
Rule syntax |
Possible values |
font-family |
<selector> {font-family:<value>} |
<family-name> (specify) or <generic-family>~ [serif, sans-serif*, cursive*, fantasy*, monospace] |
|
font-style |
<selector> {font-style:<value>} |
normal, italic |
|
font-weight |
<selector> {font-weight:<value>} |
normal*, bold, 100*, 200*, 300*, 400*, 500*, 600*, 700*, 800*, 900* |
|
font-size |
<selector> {font-size:<value>} |
<absolute-size>, <relative-size>*, <length>~~, <percentage> |
|
font $ |
<selector> {font:<value>} |
<font-style>~~, <font-weight>*, <font-size>**, <font-family>**
|
Color and Background |
Name of Property |
Rule syntax |
Possible values |
color |
<selector> {color:<value>} |
<color> (see "Units of Measure") |
|
background-color |
<selector> {background-color:<value>} |
<color> (see "Units of Measure") |
|
background-image |
<selector> {background-image: url(<value>)} |
URL (relative or absolute path) |
|
background $ |
<selector>{background:<value>} |
<background-color> (i.e., <color>)
|
Text properties |
Name of Property |
Rule syntax |
Possible values |
Text-decoration |
<selector>{text-decoration:<value>} |
underline, line-through |
|
text-transform |
<selector>{text-transform:<value>} |
capitalize*, uppercase*, lowercase*, none* |
|
text-align |
<selector>{text-align:<value>} |
left, right, center, justify* |
|
text-indent |
<selector>{text-indent:<value>} |
<length>, <percentage>
|
Box properties |
Name of Property |
Rule syntax |
Possible values |
margin $ |
<selector>{margin:<value>} |
<length>**, <percentage>**, auto(sequence: t r b l) |
|
margin-top |
<selector>{margin-top:<value>} |
<length>**, <percentage>, auto |
|
Margin-right |
<selector>{margin-right:<value>} |
<length>, <percentage>, auto |
|
margin-bottom* |
<selector>{margin-bottom:<value>} |
<length>*, <percentage>*, auto* |
|
margin-left |
<selector>{margin-left:<value>} |
<length>, <percentage>, auto |
|
padding $* |
<selector>{padding:<value>} |
<length>*, <percentage>*, (sequence: t r b l) |
|
padding-top* |
<selector>{padding-top:<value>} |
<length>*, <percentage>* |
|
padding-right* |
<selector>{padding-right:<value>} |
<length>*, <percentage>* |
|
padding-bottom* |
<selector>{padding-bottom:<value>} |
<length>*, <percentage>* |
|
padding-left* |
<selector>{padding-left:<value>} |
<length>*, <percentage>* |
|
border-color* |
<selector>{border-color:<value>} |
<color>* |
|
border-style* |
<selector>{border-style:<value>} |
solid*, double*, groove*, ridge*, inset*, outset* |
|
border $* |
<selector>{border:<value>} |
<border-width>*, <border-style>*, <color> |
Block-level and Replaced Elements |
width |
<selector>{width:<value>} |
<length>, <percentage>, auto |
|
height |
<selector>{height:<value>} |
<length>, auto |
|
float |
<selector>{float:<value>} |
left, right |
|
clear |
<selector>{clear:<value>} |
none, left*, right*
|
Position (CSS - P) |
Name of Property |
Rule syntax |
Possible values |
position |
<selector>{position:<value>} |
absolute, relative |
|
top |
<selector>{top:<value>} |
<length>, <percentage>, auto |
|
left |
<selector>{left:<value>} |
<length>, <percentage>, auto |
|
visibility |
<selector>{visibility:<value>} |
hidden, visible, inherit |
|
z-index |
<selector>{z-index:<value>} |
<number>, auto |
|
overflow |
<selector>{overflow:<value>} |
visible, hidden, auto |
|
* = Not supported on IE 4/Mac
** = Buggy on IE 4/Mac
~ = Partially supported on IE 4/Mac
~~ = Partially supported on all 4 browsers
$ = Shorthand Property
|