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 |