CSS: The Definitive Guide, 3rd Edition (13 page)

The "web-safe" colors are those colors that generally avoid dithering on
256-color computer systems. Web-safe colors can be expressed in multiples of the
RGB values
20%
and
51
, and the corresponding hex-pair value
33
. Also,
0%
or
0
is a safe value. So, if you use RGB percentages,
make all three values either
0%
or a number
divisible by 20—for example,
rgb(40%,100%,80%)
or
rgb(60%,0%,0%)
. If you use RGB values on the
0–255 scale, the values should be either
0
or
divisible by
51
, as in
rgb(0,204,153)
or
rgb(255,0,102)
.

With hexadecimal notation, any triplet that uses the values
00
,
33
,
66
,
99
,
CC
, and
FF
is
considered to be web-safe. Examples are
#669933
,
#00CC66
, and
#FF00FF
. This means the shorthand hex values that are
web-safe are
0
,
3
,
6
,
9
,
C
, and
F
; therefore,
#693
,
#0C6
, and
#F0F
are
examples of web-safe colors.

Inches
(
in
)

As you might expect, this notation refers to the inches you'd find on a
ruler in the United States. (The fact that this unit is in the
specification, even though almost the entire world uses the metric system,
is an interesting insight into the pervasiveness of U.S. interests on the
Internet—but let's not get into virtual sociopolitical theory right
now.)

Centimeters
(
cm
)

Refers to the centimeters that you'd find on rulers the world over. There
are 2.54 centimeters to an inch, and one centimeter equals 0.394
inches.

Millimeters
(
mm
)

For those Americans who are metric-challenged, there are 10 millimeters
to a centimeter, so an inch equals 25.4 millimeters, and a millimeter equals
0.0394 inches.

Points
(
pt
)

Points are standard typographical measurements that have been used by
printers and typesetters for decades and by word-processing programs for
many years. Traditionally, there are 72 points to an inch (points were
defined before widespread use of the metric system). Therefore, the capital
letters of text set to 12 points should be one-sixth of an inch tall. For
example,
p {font-size
:
18pt;}
is equivalent to
p {font-size
:
0.25in;}
.

Picas
(
pc
)

Picas are another typographical term. A pica is equivalent to 12 points,
which means there are 6 picas to an inch. As just shown, the capital letters
of text set to 1 pica should be one-sixth of an inch tall. For example,
p {font-size
:
1.5pc;}
would set text to the same size as the example
declarations found in the definition of points.

Figure 4-3. Setting absolute-length left margins

If a monitor's resolution is set to 1,024 pixels wide by
768 pixels tall, its screen size is exactly 14.22 inches wide by 10.67 inches
tall, and it is filled entirely by the display area, then each pixel will be 1/72
of an inch wide and tall. As you might guess, this scenario is a very, very rare
occurrence (have you ever seen a monitor with those dimensions?). So, on most
monitors, the actual number of pixels per inch (ppi)
is higher than 72—sometimes much higher, up to 120 ppi
and beyond.

As a Windows user, you might be able to set your display
driver to make the display of elements correspond correctly to real-world
measurements. To try, click Start → Settings → Control Panel. In the Control
Panel, double-click Display. Click the Settings tab, and click Advanced to reveal
a dialog box (which may differ on each PC). You should see a section labeled Font
Size; select Other, and then hold a ruler up to the screen and move the slider
until the onscreen ruler matches the physical ruler. Click OK until you're free of
dialog boxes, and you're set.

If you're a Mac Classic user, there's no
place to set this information in the operating system—the Mac Classic OS (that is,
any version previous to OS X) makes an assumption about the relationship between
on-screen pixels and absolute measurements by declaring your monitor to have 72
pixels to the inch. This assumption is totally wrong, but it's built into the
operating system, and therefore pretty much unavoidable. As a result, on many
Classic Mac-based web browsers, any point value will be equivalent to the same
length in pixels:
24pt
text will be 24 pixels
tall, and
8pt
text will be 8 pixels tall. This
is, unfortunately, slightly too small to be legible.
Figure 4-4
illustrates the
problem.

Figure 4-4. Teensy text makes for difficult reading

In OS X, the built-in assumed ppi value is closer to Windows: 96ppi.
This doesn't make it any more correct, but it's at least consistent with Windows
machines.

The Classic Mac display problem is an excellent example of
why points should be strenuously avoided when designing for the Web. Ems,
percentages, and even pixels are all preferable to points where browser display is
concerned.

Despite all we've seen, let's make the highly suspect assumption that
your computer knows enough about its display system to accurately reproduce
real-world measurements. In that case, you could make sure every paragraph has a
top margin of half an inch by declaring
p
{margin-top
:
0.5in;}
. Regardless of
font size or any other circumstances, a paragraph will have a half-inch top
margin.

Absolute units are much more useful in defining style sheets
for printed documents, where measuring things in terms of inches, points, and
picas is common. As you've seen, attempting to use absolute measurements in web
design is perilous at best, so let's turn to some more useful units of
measure.

First, however, let's consider
em
and
ex
. In CSS, one "em" is defined to be the
value of
font-size
for a given font. If the
font-size
of an element is 14 pixels, then
for that element,
1em
is equal to 14 pixels.

Obviously, this value can change from element to element. For example, let's
say you have an
h1
with a font size of 24
pixels, an
h2
element with a font size of 18
pixels, and a paragraph with a font size of 12 pixels. If you set the left margin
of all three at
1em
, they will have left
margins of 24 pixels, 18 pixels, and 12 pixels, respectively:

h1 {font-size: 24px;}
h2 {font-size: 18px;}
p {font-size: 12px;}
h1, h2, p {margin-left: 1em;}
small {font-size: 0.8em;}
Left margin = 24 pixels
Left margin = 18 pixels
Left margin = 12 pixels

When setting the size of the font, on the other hand, the value of
em
is relative to the font size of the parent
element, as illustrated by
Figure 4-5
.

Figure 4-5. Using em for margins and font sizing

ex
, on the other hand, refers to the height of
a lowercase
x
in the font being used. Therefore, if you have
two paragraphs in which the text is 24 points in size, but each paragraph uses a
different font, then the value of
ex
could be
different for each paragraph. This is because different fonts have different
heights for
x
, as you can see in
Figure 4-6
. Even though the examples use
24-point text—and therefore, each example's
em
value is 24 points—the x-height for each is different.

Figure 4-6. Varying x-heights

Of course, everything I've just explained is completely
theoretical. I've outlined what is
supposed
to happen, but in
practice, many user agents get their value for
ex
by taking the value of
em
and
dividing it in half. Why? Apparently, most fonts don't have the value of their
ex
height built-in, and it's a very
difficult thing to compute. Since most fonts have lowercase letters that are about
half as tall as uppercase letters, it's a convenient fiction to assume that
1ex
is equivalent to
0.5em
.

A few browsers, including Internet Explorer 5 for Mac, actually attempt to
determine the x-height of a given font by internally rendering a lowercase
x
and counting pixels to determine its height compared to
that of the
font-size
value used to create the
character. This is not a perfect method, but it's much better than simply making
1ex
equal to
0.5em
. We CSS practitioners can hope that, as time goes on, more user
agents will start using real values for
ex
and
the half-em shortcut will fade into the past.

On the
face of things, pixels are straightforward. If you look at a monitor closely
enough, you can see that it's broken up into a grid of tiny little boxes. Each box
is a pixel. If you define an element to be a certain number of pixels tall and
wide, as in the following
markup:

The following image is 20 pixels tall and wide: style="width: 20px; height: 20px;" alt="" />

then
it follows that the element will be that many monitor elements tall and wide, as
shown in
Figure 4-7
.

Figure 4-7. Using pixel lengths

Unfortunately, there is a potential drawback to using pixels. If you
set font sizes in pixels, then users of Internet Explorer for Windows previous to
IE7 cannot resize the text using the Text Size menu in their browser. This can be
a problem if your text is too small for a user to comfortably read. If you use
more flexible measurements, such as
em
, the
user can resize text. (If you're exceedingly protective of your design, you might
call
that
a drawback, of course.)

On the other
hand, pixel measurements are perfect for expressing the size of images, which are
already a certain number of pixels tall and wide. In fact, the only time you would
not want pixels to express image size is if you want them scaled along with the
size of the text. This is an admirable and occasionally useful approach, and one
that would really make sense if you were using vector-based images instead of
pixel-based images. (With the adoption of Scalable Vector Graphics, look for more
on this in the future.)

So why are pixels defined as relative
lengths? I've explained that the tiny boxes of color in a monitor are pixels.
However, how many of those boxes equals one inch? This may seem like a non
sequitur, but bear with me for a moment.

In its discussion of pixels,
the CSS specification recommends that in cases where a display type is
significantly different than 96ppi, user agents should scale pixel measurements to
a "reference pixel." CSS2 recommended 90ppi as the reference pixel, but CSS2.1
recommends 96ppi—a measurement common to Windows machines and adopted by modern
Macintosh browsers such as Safari.

In general, if you declare
something like
font-size
:
18px
, a web browser will almost certainly use actual
pixels on your monitor—after all, they're already there—but with other display
devices, like printers, the user agent will have to rescale pixel lengths to
something more sensible. In other words, the printing code has to figure out how
many dots there are in a pixel, and to do so, it may use the 96ppi reference
pixel.

Because of this potential for rescaling, pixels are defined as a
relative unit of measurement, even though, in web design, they behave much like
absolute units.

Given all the issues involved, the best measurements to use are probably the
relative measurements, most especially
em
, and
also
px
when appropriate. Because
ex
is, in most currently used browsers, basically a
fractional measurement of
em
, it's not all that
useful for the time being. If more user agents support real x-height measurements,
ex
might come into its own. In general,
em
s are more flexible because they scale
with font sizes, so elements and element separation will stay more consistent.

Other element aspects may be more amenable to the use of pixels, such as
borders or the positioning of elements. It all depends on the situation. For
example, in designs that traditionally use spacer GIFs to separate pieces of a
design, pixel-length margins will produce an identical effect. Converting that
separation distance to
em
s would allow the
design to grow or shrink as the text size changes—which might or might not be a
good thing.