CSS Properties
/skill level/
/viewed/
0 Times
| 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>} | ~~, *, **, ** |
| Color and Background | ||
| Name of Property | Rule syntax | Possible values |
| color | <selector> {color:<value>} |
<color> (see [/webmonkey/stylesheets/reference/units.html "Units of Measure")] |
|
| ||
| background-color | <selector> {background-color:<value>} |
<color> (see [/webmonkey/stylesheets/reference/units.html "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 | ||
Article
Suggested readings
From the series
|
Stylesheets Guide |
- This page was last modified 03:04, 14 May 2008.