 | Web Design in a Nutshell, 2nd Edition |  |
It is important to use the proper syntax for specifying length and color values in style sheet rules.
Table 17-1 lists units of measurements that can be specified in style sheet values.
|
Code |
Unit |
Description |
|---|---|---|
|
px |
Pixel |
Pixel units are relative to the monitor resolution. |
|
pt |
Point |
A traditional publishing unit of measurement for type. There are approximately 72 points in an inch. |
|
pc |
Pica |
A traditional publishing unit of measurement equal to 12 points (or 1/6 of an inch). |
|
em |
Em |
A relative unit of measurement that traditionally equals the width of the capital letter M in the current font. In practical terms, it is equal to the point size of the font(e.g., an em space in 24pt type is 24 points wide). |
|
ex |
Ex |
A relative unit of measurement which is the height of the letter "x" for that font (approximately half the length of an em). |
|
in |
Inches |
Standard unit of measurement in the U.S. |
|
mm |
Millimeters |
Metric measurement. |
|
cm |
Centimeters |
Metric measurement. |
Some values can be specified as percentages that are relative to the font size or bounding box of the element. The following example makes the line height 120% of the element's font size:
P {line-height: 120%}Designers should keep in mind that the specific unit measurements listed above (pt, pc, in, mm, and cm) are not good choices for screen design because of the variation in size from monitor to monitor. It is preferable to specify sizes using relative measurements such as em and ex. Pixels (px) are acceptable as measurements for elements, but not necessarily for text. See the Section 17.8.2, "Specifying Text Size in Pixels" later in this chapter for the pros and cons.
As in HTML tags, there are two methods for specifying color in style sheets: by name and by numerical values.
You can specify color values by name as follows:
H1 {color: olive}The CSS1 Specification specifically lists only 16 color names that can be used in style sheets; they are:
|
aqua |
gray |
navy |
silver |
|
black |
green |
olive |
teal |
|
blue |
lime |
purple |
white |
|
fuchsia |
maroon |
red |
yellow |
Other names from the complete list of color names may be supported by some browsers. For the complete list, see Chapter 16, "Specifying Color in HTML".
Within style sheets, RGB colors can be specified by any of the following methods:
H1 {color: #0000FF}
H1 {color: #00F}
H1 {color: rgb(0,0,255)}
H1 {color: rgb(0%, 0%, 100%)}The first method uses three two-digit hexadecimal RGB values (for a complete explanation, see Chapter 16, "Specifying Color in HTML"). The second method uses a three-digit syntax, which is essentially converted to the six-digit form by replicating each digit (therefore, 00F is the same as 0000FF).
The last two methods use a functional notation specifying RGB values as a comma-separated list of regular values (from 0 to 255) or percentage values (from 0 to 100%). Note that percentage values can use decimals, e.g., rgb(0%, 50.5%, 33.3%).
|  | |
| 17.3. Selectors |  | 17.5. Properties |
Copyright © 2002 O'Reilly & Associates. All rights reserved.