A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.
It's fast and free.
processing...Retrieve Sign In
Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.
processing...Welcome to Webmonkey
- edit articles
- add to the code library
- design and write a tutorial
- comment on any Webmonkey article
Sign In Information Sent
CSS Properties
/skill level/
/viewed/
Stylesheets 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>} | ~~, *, **, ** |
| 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
|
Stylesheets Guide |
/related_articles/
Special Offer For Webmonkey Users
WIRED magazine:
The first word on how technology is changing our world.
Registration on or use of this site constitutes acceptance of our User Agreement (Revised 4/2/2009) and Privacy Policy (Revised 4/2/2009).
Wired.com © 2009 Condé Nast Digital. All rights reserved.
The material on this site may not be reproduced, distributed, transmitted, cached or otherwise used, except with the prior written permission of Condé Nast Digital.