| Css Properties | ||
| 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> |
| background-color | <selector> {background-color:<value>} | <color> |
| 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 |
$ = Shorthand Property | ||



