|
|
Author: * Sankira Qin -
15 Posts
on this thread out of
1,337 Posts
sitewide.
Date: May 31, 2005 - 22:08
Property and Value Lists
Now that you know how to create CSS rules, you'll need to start learning the basic properties and their values. For a while, I'll be presenting lists of related properties and their values, which will then (hopefully) be followed by tip sheets for each property and its values. Since text is so important in webpages, we'll start with fonts. Notice some of the properties begin with font- and some begin with text-. Be sure to use the right one when coding.
Font and Text Formatting
| Property |
Value |
Example |
Supported Browsers |
| |
|
|
E | N | F | O |
| color |
#hex number, rgb(%,%,%), keywords, rgb(#,#,#) |
#CC0000, rgb(60%,20%,20%), red, rgb(255,16,101) |
| | | |
| font-family |
family-name or generic-family |
serif and sans-serif are generic fonts; it's a good idea to include one or the other after your list of font names (Arial,Helvetica,sans-serif). If none of the fonts you indicated are installed on the visitor's computer, CSS will use the generic description to render a font that is in the style you chose. |
| | | |
| font-size |
pt, px, percent, absolute-size ([ xx-small | x-small | small | medium | large | x-large | xx-large ]) |
pt is Point, i.e. 12pt px is Pixel, i.e. 10px |
| | | |
| font-stretch |
normal,
wider, narrower, ultra-condensed, extra-condensed, condensed,
semi-condensed, semi-expanded, expanded, extra-expanded,
ultra-expanded, inherit |
|
| | | |
| font-style |
normal,
italic, oblique |
oblique is created by the computer using an algorithm to "tilt" the font to the right; if the font you choose has no italic version, CSS will default to oblique. |
| | | |
| font-variant |
normal,
small-caps |
|
| | | |
| font-weight |
normal, bold, bolder, lighter, number (100, 200 ... 900; ), inherit |
Not all fonts are able to render in all weight values. If they aren't able to do so, they will default to the nearest number that they CAN render. |
| | | |
| font |
font-style font-variant font-weight font-size/line-height font-family |
Need to be listed in the correct order; can leave out any options you don't want to use. Note: using this shorthand resets any property not explicitly given a value to its initial value. { italic small-caps bold 18pt/24pt "Times New Roman"; } |
| | | |
| letter-spacing |
normal, 1em, 2em, etc. |
Affects kerning (the distance between letters). |
| | | |
| line-height |
normal, %, pt, etc. |
Affects leading (the distance between lines of text). |
| | | |
| text-align |
left, right, center, justify |
|
| | | |
| text-decoration |
none,
underline, overline, line-through, blink |
blink is not available in MSIE |
| | | |
| text-shadow |
none,
color length length length, inherit |
See filters (Visual Effects) for another way of creating shadows. |
| | | |
| text-transform |
none, capitalize, uppercase, lowercase |
|
| | | |
| text-indent |
(length), (percent) |
Length in pixels; indents the first line of a paragraph. |
| | | |
| word-spacing |
normal, 1em, 2em, etc |
Affects the distance between words.
|
| | | |
|
|