CSS Tutorial
Fonts
There are several units of measurement in CSS, either fixed or absolute, as illustrated in the chart below. It has been considered best practice to avoid the use of fixed units if you are supporting IE6, since that browser cannot resize fixed fonts. Developers have tended to use ems and percentages for font size, line-height, and padding and margins for P elements. If you do not care about IE6, you may prefer to use pixels for font sizes.
| Unit | Equivalent | Comments |
|---|---|---|
| Relative Units | ||
| em | em-height | The W3C says "The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)" Popularly put, this is the width and height of the capital letter M in whatever font is used. This may be the best unit of measurement because it is pretty consistent across-browsers and platforms, and is resizable even in IE. |
| ex | x-height | The W3C says "The 'ex' unit is defined by the font's 'x-height'. The x-height is so called because it is often equal to the height of the lowercase "x". However, an 'ex' is defined even for fonts that don't contain an "x"." This unit is used less often than em. Popularly put, this is the width and height of the capital letter X in whatever font is used. |
| % | percentage | Used like em and ex above to be consistent across browsers and platforms. It will re-size in IE6. It is also useful for general page metrics when you want porportional width pages, as opposed to fixed-width layouts. |
| px | pixels | A pixel is one picture element on the display monitor. There are typically between 72 and 90 pixels per inch. But it is reasonably consistent enough across browsers and platforms. A drawback is that font sizes in pixels will not re-size in IE6, though, in a standards-compliant browser pixels are scalable when used for fonts. Pixels for page widths create fixed width pages. What is confusing is that pixels seem to be absolute rather than relative, but are classified relative by the W3C because of the variance in rendering across UAs. I myself find this a bit confusing and prefer to think of pixels as absolute since they do not scale like the other relative units of measurements. |
| Absolute Units | ||
| pt | points | Points display very different between platforms. Avoid them. In CSS2 72 points make an inch, 12 points make a pica. Note: points do NOT equal pixels. |
| in | inches | Self-explanatory, and not used too often. 1 inch is equal to 2.54 centimeters. |
| cm | centimeters | Self-explanatory, and not used too often. |
| mm | millimeters | Self-explanatory, and not used too often. |
| pc | picas | 1 pica is equal to 12 points. 6 picas make an inch. Picas are used in visual design more than CSS. |
If you are used to pixels, and are confused by ems, there's a nice trick available to acquaint you with them. Set the font-size property to somewhere between 62.5% and 65% in the BODY element. Then ems will somewhat resemble pixels. For example 11px will then be roughly equivalent to 1.1ems. 10px will be roughly equivalent to 1.0em. Note that an em sizes text relative to its parent. Text set to 1em within a parent element set to 2em, will display larger than text set to 1em with a parent element of 1.5em. Another trick is to set the HTML element to about 72%, and then set the BODY element to 1em.
Color
Colors can be declared in several ways.
Named Colors
Colors can be called by name. The number of supported color names is increasing with each browser release.
p em {color: red;}
There is a good online list of named colors. Many developers do not advise using names because the actual output may vary across UAs. However, I feel that the end-user should be able to control output.
RGB (Hexadecimal) Colors
Colors can be called by a hexadecimal number. Hexadecimal numbers for web color are comprised of a hash sign and three pairs of RGB values, which stand for red, green, and blue. They range from 00 to FF. The former example could be also written as follows.
p em {color: #FF0000;}
Thus, the red value is FF (i.e. fully on), and the green and blue values are 00 (i.e. fully off). Hexadecimal colors can be abbreviated if the values in each pair are identical. Thus, the previous example can be written as follows.
p em {color: #F00;}
However, the following example cannot be similarly abbreviated because the last pair consists of two different values: 0 and 7.
p em {color: 99FF07;}
RGB (Decimal) Color Values
As stated above, hexadecimals range from 00 to FF. Converted to decimal values they range from 0 to 255. Thus, if you wish to convert the hexadecimal value for red (#F00) to decimal, it would be 255, 0, 0. We can rewrite our declaration.
p em {color: rgb(255,0,0);}
RGB (Percentage) Color Values
RGB decimal colors can also be declared with percentage values, with 0% equaling 0, and 100%, not surprisingly, equaling 255. We rewrite our example.
p em {color: rgb(100%,0%,0%);}
Other Values
Other property values for color are transparent and inherit. The inherit value will be discussed below. Transparent simply ensures that the inherited background color will not be applied.