Font properties |
Property Name |
Rule Syntax |
Possible Values |
see
'color' below |
|
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
note: 10px is functionally the smallest acceptable, cross platform pixel
size.
** see the opposing view: How Do I Size Fonts? |
|
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. |
|
Font 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.
meaning:
indentation allotted for first line of paragraph. |
|
The Anchor Pseudo Classes: Styling
Links |
Property |
Rule Syntax |
Possible Values |
Normal Link |
a:link { <declaration>
} |
any combination of CSS definitions |
|
Hover: mouse is over the link |
a:hover { <declaration>
} |
any combination of CSS definitions |
|
Active: mouse is pressed on a link |
a:active { <declaration>
} |
any combination of CSS definitions |
|
Visited Link |
a:visited { <declaration>
} |
any combination of CSS definitions |
Multiple Link Styles |
You can apply more than one kind of link style. Define
all of the anchor pseudo classes for another CLASS, e.g., "nav": a.nav:link { color:#336699; text-decoration:none;
}
a.nav:hover{ color:#336699; text-decoration:underline; }
a.nav:active { color:#996633; }
a.nav:visited { color:#ffcc33; }
This style definition would apply to the following example: <a
href="http://nukes.org/" class="nav"> nukeville</a> |
|
Color and Background |
Property Name |
Rule Syntax |
Possible Values |
color |
<selector> { color:<value>;
} |
hex color or color name [see colorhell ]
alternatively:
rgb(<r>,<g>,<b>)
where the values are from 0 to 255 |
|
background-color |
<selector> { background-color:<value>;
} |
hex value or color name [see colorhell ]
rgb(<r>,<g>,<b>) |
|
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 Box Model
|
see illustration of the box
model http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions
|
Property Name |
Rule Syntax |
Possible Values |
padding |
<selector> { padding:<value>;
} |
relative or absolute units
of linear distance. |
|
padding-top
padding-right
padding-bottom
padding-left |
<selector> { padding-top:
<value>; padding-right:
<value>; padding-bottom:
<value>; padding-left:
<value>;
} |
relative or absolute units
of linear distance. |
Padding SHORTHAND: combines multiple
properties in one definition: |
padding |
<selector> { padding:
<padding-top> <padding-right> <padding-bottom> <padding-left>;
}
example :
p { padding: 2px 5px 10px 8px; }
<selector> { padding:
<padding-top and padding-bottom> <padding-right and padding-left>;
}
example :
p { padding: 20px 5px; }
|
no commas separate the values for the various properties.
The mnemonic for remembering the order of the definition is:
TRouBLe
that is: Top, Right, Bottom, Left
This shorthand also applies to "margin" and "border" properties. |
|
margin |
<selector> { margin:<value>;
} |
relative or absolute units
of linear distance. |
|
margin-top
margin-right
margin-bottom
margin-left |
<selector> { margin-top:
<value>; margin-right:
<value>; margin-bottom:
<value>; margin-left:
<value>;
} |
relative or absolute units
of linear distance. |
|
border
also:
border-width |
<selector> { border: <value>;
} |
relative or absolute units
of linear distance,
or none (for "border property only). |
|
border-top
border-right
border-bottom
border-left
also:
border-left-width |
<selector> { border-top:
<value>; border-right:
<value>; border-bottom:
<value>; border-left:
<value>;
} |
relative or absolute units
of linear distance. |
|
border-color |
<selector> { border-color:
<value>; } |
hex value or color name [see colorhell ]
rgb(<r>,<g>,<b>) |
|
border-top-color
border-right-color
border-bottom-color
border-left-color |
<selector> { border-top-color:
<value>; border-right-color:
<value>; border-bottom-color:
<value>; border-left-color:
<value>;
} |
hex value or color name [see colorhell ]
rgb(<r>,<g>,<b>) |
|
border-style |
<selector> { border-style:
<value>; } |
solid, dotted, dashed,
groove, double, ridge, inset, outset |
|
border-top-style
border-right-style
border-bottom-style
border-left-style |
<selector> { border-top-style :
<value>; border-right-style :
<value>; border-bottom-style :
<value>; border-left-style :
<value>;
} |
|
|
Border SHORTHAND: combines multiple
properties in one definition: |
border |
<selector> { border:
<border-width> <border-style> <border-color>;
}
example :
p { border: 5px solid #003366; } |
no commas separate the values for the various properties. |
|
see also: overflow
and clipping http://www.w3.org/TR/REC-CSS2/visufx.html#overflow-clipping |
|
Postioning |
Property Name |
Rule Syntax |
Possible Values |
position |
<selector> { position:<value>;
} |
absolute, relative, (fixed) meaning:
"absolute" means that the element is placed based on
the location of it's parent element. It is measured from the top left
corner of that element. "relative" means the element
is shifted from where it would otherwise be placed. This leaves a blank
space where the element would have been placed in the normal flow of the
document. |
|
top
left
(right, bottom) |
<selector> { top: <value>;
left: <value>; } |
relative or absolute units
of linear distance. |
|
z-index |
<selector> { z-index:<value>;
} |
a positive integer. meaning:
"z-index" indicates the depth of stacking, the illusion
of "in front" and "behind" in two dimensions. |
|
float |
<selector> { float:<value>;
} |
left, right, none |
Positioning Example |
|
example of
normal use :
#main { position:
absolute; top: 20px;
left: 200px;
z-index: 2;
}
this would apply to the following element:
<div id="main"> hello...</div> |
|
|