Reference
Stylesheets Guide
Quick Reference:
HTML Cheatsheet |
Special Characters |
Color Codes
Browser Chart |
Stylesheet Guide |
Unix Guide
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
|
- What Is CSS?
- How CSS Works
- Linking Stylesheets
- Units of Measure
- Attributes
- CSS Properties
- CSS Examples
|
