| Font properties |
| Property Name |
Rule syntax |
Possible values |
| font-family |
<selector> {font-family:<value>;}
examples:
p {font-family: Arial, Helvetica, sans-serif;}
.mono {font-family: Courier, Courier New, monospace;} |
A comma separated list of font names.
The first item available on the users computer will be used.
The last item on the list should always be a generic family name:
serif, sans-serif, monospace, cursive, fantasy |
|
| font-style |
<selector> {font-style:<value>;} |
normal, italic |
|
| font-weight |
<selector> {font-weight:<value>;} |
UNITS
RELATIVE: normal, bold, lighter, bolder
ABSOLUTE: 100, 200, 300,
400, 500, 600, 700, 800, 900 |
|
| font-size |
<selector> {font-size:<value>;} |
UNITS of Linear Distance
RELATIVE: px
| em | ex
ABSOLUTE: pt | pc | cm
| mm | in
RELATIVE: smaller
| larger
"ABSOLUTE" (similar
to <font size="3">):
xx-small | x-small | small | medium | large | x-large | xx-large
PERCENTAGE: 150%
see article: Give
Me Pixels or Give Me Death |
|
| line-height |
<selector> {line-height:<value>;} |
relative or absolute
units of linear distance. |
|
| letter-spacing |
<selector> {letter-spacing:<value>;} |
relative or absolute
units of linear distance. |
|
| word-spacing |
<selector> {word-spacingt:<value>;} |
relative or absolute
units of linear distance. |
|
| SHORTHAND: combines multiple properties in one definition: |
| font |
<selector> {font: <font-style> <font-weight>
<font-size>/<line-height> <font-family>;}
example :
p { font: normal 800 18px/18px Arial, Verdana, sans-serif;} |
no commas separate the values for the various properties,
except for the list of font-family values. |
|
| Text properties |
| Property Name |
Rule syntax |
Possible values |
| text-decoration |
<selector> {text-decoration:<value>;} |
none, underline, overline, 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>;} |
relative or absolute
units of linear distance.
|
|
| Color and Background |
| Property Name |
Rule syntax |
Possible values |
| color |
<selector> {color:<value>;} |
hex color or color name [see colorhell] |
|
| background-color |
<selector> {background-color:<value>;} |
hex value or color name [see colorhell] |
|
| background-image |
<selector> {background-image:
url(<value>);} |
URL (<relative or absolute path>) |
| |
| background-repeat |
<selector> {background-repeat:
<value>;} |
repeat, no-repeat, repeat-x, repeat-y |
|
| background-position |
<selector> {background-position: <x value>
<y value>;}
example:
body {background-position: 30px 20px; } |
pixel values, percentage values,
left | center | right
top | center | bottom
note: if only one value is specified it applies to the verical value |
|
| background-attachment |
<selector> {background-attachment:
<value>;} |
fixed, scroll |
|
| The Anchor Pseudo Classes |
| Property |
Rule syntax |
Possible values |
| Normal Link |
a:link {<definition>} |
any combination of CSS definitions |
|
| Hover: mouse is over the link |
a:hover {<definition>} |
any combination of CSS definitions |
|
| Active: mouse is pressed on a link |
a:active {<definition>}
|
any combination of CSS definitions |
|
| Visited Link |
a:visited {<definition>} |
any combination of CSS definitions |
|
| |
