and typeface of the font, respectively. In addition, there are a number of other properties
that can be used to further select fonts from within those families. These properties are
font-weight, font-variant, font-style, font-stretch, and font-size-adjust.
To understand how these properties work, it’s important to understand how CSS views
fonts. A font in CSS is one specific instance of several properties: a specific typeface,
size, weight, and other variables. So the font
12pt Arial bold italic is different from
the font 10pt Arial. They are part of the same font family, of course. It’s helpful to
remember that when you declare a font family, you’re actually selecting a group of fonts
to be used. Other properties (or browser defaults) will narrow down the specific font.
Font families generally include a number of variations on the base font, for example, an
italic version of the font. In some cases, you will specify a font combination that simply
isn’t available as a distinct variant. The browser will then have to create a variant on the
fly by slanting the text to produce italic effects, for example, or by using the closest
available equivalent in the font family.
The effects produced by various font settings are listed in Table 8.1 for reference; this is
because it’s not always clear which property controls which effect.
TABLE 8.1 Properties Affecting Font Display
Property Effect
font-family Selects the typeface family
font-size Sets the size of the font
font-weight Makes text bold or lighter
font-variant Creates “small caps” effect
font-style Sets italic font
font-stretch Stretches the font horizontally
text-decoration (Hour 9) Underlines text
color (Hour 9) Changes the color of text
line-height (Hour 12) The height of the line (but not the text height)
font Sets font-family, font-size, font-weight, font-variant,
font-style, and line-height
The font-weight Property

<strong>, <h1> to <h6>, and <th>,will default to bold (700).
13 0672324091 ch08 6/13/02 10:35 AM Page 133
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
TABLE 8.2 Values for the font-weight Property
Value Effect
100 to 900 Lightest (100) to heaviest (900) font weight
bold Same as 700
bolder
One step (+100) heavier than the containing box’s font-weight
lighter
One step (-100) lighter than the containing box’s font-weight
normal
Same as 400
inherit Uses the value of the containing box’s font-weight property
If a font’s weight is already at 900,the value bolder won’t make it any heavier; likewise,
if the font-weight is 100, lighter has no additional effect.
134 Hour 8
FIGURE 8.2
Successive
font-
weight
values of
Verdana font, shown in
Internet Explorer 5.1
(Macintosh).
I noted earlier that browsers aren’t consistent about how heavy they make
in-between values, such as 500 or 600. Because bolder and lighter move up
or down in steps of 100, it’s possible that a bolder (or lighter) rule may
have no effect. If the default is 400, and the browser does not render 500 as
700 but as 400, an increase of 100 is meaningless. For this reason it’s proba-

The font-style Property
To set something in an italic or oblique font, you can use the font-style property;
font-style is not used for anything else, although the name seems deceptively general.
The values for font-style are shown in Table 8.4. If there’s a font-style property set
on the containing box, it will be inherited. Otherwise, the default will usually be normal,
although some HTML properties, such as <i>, <em>, and <address>,are normally itali-
cized by Web browsers.
TABLE 8.4 Values for the font-style Property
Value Effect
italic Uses an italic font
normal Uses a non-oblique, non-italic font
oblique Uses an oblique or slanted font
inherit Uses the value of the containing box’s font-style property
136 Hour 8
What is oblique? Although it’s a less common term than italic, it’s a
related concept.
Most fonts we see are called Roman fonts; these are not slanted, and they
correspond to the CSS value of normal. An italic font is created by making
slanted, slightly curly alternate versions of the letters in a Roman font; each
letter has been redesigned so that it’s essentially a new set of characters
within the same font family.
An oblique font, on the other hand, is created simply by tilting the Roman
font’s characters at an angle. This doesn’t always require font redesign and
can be done automatically by a computer, but often the results are not
nearly as nice looking. Many typography books explicitly discourage the use
of computer-created obliques.
Browsers will treat italic and oblique property values the same because they don’t
really know the difference most of the time. The CSS specification allows for italic
fonts to be displayed as oblique (even oblique fonts generated automatically) if a match-
ing italic font is not available. You’ll probably want to simply use italic; don’t worry

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
TABLE 8.5 Values for the font-stretch Property
Value Effect
ultra-condensed Most narrow
extra-condensed Very narrow
condensed Narrow
semi-condensed Somewhat narrow
normal Unchanged (default)
semi-expanded Somewhat wider
expanded Wide
extra-expanded Very wide
ultra-expanded Widest
wider Increase by one step over inherited value
narrower Decreases by one step below inherited value
inherit Uses the font-stretch value of the containing box
138 Hour 8
Unfortunately, no browser currently supports the font-stretch property.
This is the reason there’s no screenshot of these values in action. If you need
to use a condensed font, you should name the specific condensed font as
one of the fonts in font-family, such as
h2.compressed {
font-family: "Arial MT Condensed Light",
Arial, sans-serif; }
See the discussion later this hour on font availability.
The font-size-adjust Property
Not all fonts of the same point size look like they’re the same size. For example, 12-
point Verdana looks much larger than 12-point Times New Roman. Why is that if they’re
both 12 point?
To understand the reason for that, and to understand how to use
font-size-adjust, you

aspect ratio to another value. You write a font-size-adjust rule like this:
selector { font-size-adjust: aspect-value; }
For example, to make your Verdana and Times New Roman fonts look closer to the same
size, use this type of CSS rule:
body { font-size: 12pt;
font-family: Verdana, sans-serif;
font-size-adjust: 0.46; }
Like font-stretch, font-size-adjust is not supported by existing
browsers. For this level of font control, you’ll have to wait for future CSS
implementations.
13 0672324091 ch08 6/13/02 10:35 AM Page 139
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
140 Hour 8
Don’t overlook that first function, resetting to default values! You can easily
spend hours trying to debug your style sheet. In addition to anything else a
font rule does, it also is equivalent to the following declarations:
font-family: serif; /* or the default browser font */
font-size: medium;
font-weight: normal;
font-variant: normal;
font-style: normal;
line-height: 100%;
A font rule looks like this:
selector { font: style variant weight size family; }
The values for weight, size, and family must be specified in that exact order, but other
than that the values can appear in any order. Any values that aren’t listed are set to their
default values. Here are some examples of font shorthand rules:
body { font: 12pt normal "Times New Roman"; }
h1 { font: 20pt Arial italic small-caps; }
blockquote { font: bold "Courier New", sans-serif; }

selector { font-family: font1, font2, font3,
generic; }
You can give as many alternate fonts as you want; the browser will look through its own
list (from the computer’s operating system) and locate the closest match. Once it finds
one, it will display the text using that font face. For example, consider this rule:
h1 { font-family: "MS Sans Serif", Palatino, Helvetica,
"Bookman Old Style", "Times New Roman", Times,
Garamond, Chicago, Arial, Geneva, Verdana,
cursive; }
The browser will start looking through the list of fonts, and if it finds a match, it will
use that font. So on my Windows computer, it might find “MS Sans Serif” and dis-
play the <h1> in that font; on my Apple iBook, it won’t find "MS Sans Serif" and
will go on to the next one. If the iBook has Palatino (which it does), that’s the font
family that will be used.
The font property can also take values based on the user’s operating system
fonts; these are discussed in detail in Hour 22, “User Interface and
Generated Content.”
Remember to include quotes around font names that are more than one word!
The Generic Font Families
In the long rule above, I included a generic font family name at the end—cursive. In
case the browser can’t find any of the 11 named fonts, it will use the browser’s cursive
font. The exact value of the cursive font will vary a lot from operating system to operat-
ing system; also, modern browsers (such as Netscape 6 or Internet Explorer 5.1 for
13 0672324091 ch08 6/13/02 10:35 AM Page 141
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
142 Hour 8
Macintosh) allow the user to set specific fonts tied to the generic families. So on my
Netscape 6, cursive might mean
"Apple Chancery",whereas on yours it may be the
"Lucida Handwriting" font.

Generic font families
in Opera 6 (Windows).
13 0672324091 ch08 6/13/02 10:35 AM Page 143
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Finally, Figure 8.8 shows how Internet Explorer on the Macintosh interprets the generic
font families. Compare these fonts with those in the previous figures, and you’ll find that
there’s little regularity across browsers—or even within browsers or operating systems—
when using fantasy and cursive families.
144 Hour 8
FIGURE 8.8
Generic font families in
Internet Explorer 5.1
(Macintosh).
Generic font families are good for fallback; without them, your font face will be the sin-
gle default of the browser, usually something like "Times New Roman". However, they’re
not very consistent, as you can see. They are still better than the basic default, however,
and you will want to include a generic family in each font-family property value (or
font shorthand property value).
serif
In font terminology a serif is defined as the little feet or curved bits added to the end of
the straight lines that constitute a letter. These help to make the characters easier to dis-
tinguish when reading, especially when reading print. A serif font makes it much easier
to distinguish among the number 1, the lowercase letter l, and the uppercase letter I, as
shown in Figure 8.9.
13 0672324091 ch08 6/13/02 10:35 AM Page 144
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Fonts and Font Families 145
8
Serif fonts are often used for normal body text in Web browsers. The default test font is
commonly "Times New Roman",which is usually the generic serif family font as well.

way people handwrite text. There are no real standards on what the default cursive family
should be, which is why it is different from computer to computer and even from
browser to browser. Examples include "Script MT Bold", "Apple Chancery", Swing,
and
"Lucida Handwriting"; in Figure 8.11, you can see one example of a cursive font.
Cursive fonts tend to be very difficult to read onscreen and probably should be avoided
unless you have a very specific reason to use one, such as the writer’s name after a letter,
styled to represent a written signature.
146 Hour 8
FIGURE 8.10
Sans-serif fonts have
a more modern look
than serif fonts.
Workaround for Netscape 4
Netscape 4 doesn’t recognize the cursive font family; therefore, you should
specify another generic family, as well, such as serif:
sig { font-family: "Lucida Handwriting",
cursive, serif; }
13 0672324091 ch08 6/13/02 10:35 AM Page 146
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Fonts and Font Families 147
8
FIGURE 8.11
One browser’s
cursive font.
fantasy
The
fantasy generic family is even more of a grab bag than the cursive family; any
irregular, somewhat-whimsical font falls into this category. Some are old woodcut-style
ornate letters; some are bizarre squiggles; some look like animals; and some look like

Commonly Installed Fonts
Because there’s so much variance among computers, you may not be able to know with
certainty whether or not a given font will appear on a user’s computer. She might be
using Internet Explorer 6 on Windows, but she also could’ve decided to delete Arial
entirely! (Why someone would do this, I'm not quite sure.)
FIGURE 8.12
One of many possible
fantasy fonts.
13 0672324091 ch08 6/13/02 10:35 AM Page 148
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Fonts and Font Families 149
8
However, it’s possible to devise a list of relatively safe fonts—those that are found on
most operating systems and browsers. You should continue to use generic families as
fallbacks, but these are relatively safe.
The common fonts are
"Times New Roman", Times, Arial, Helvetica, Geneva, Verdana,
"Courier New", and Courier. Other fonts are less reliable.
Downloadable Fonts and Font Descriptors
To overcome the problem of uninstalled fonts, the Cascading Style Sheets Level 2 speci-
fication defines a way to specify downloadable fonts. These fonts will be retrieved from
the Web automatically and used to display the page.
A downloadable font is declared by a
@font-face rule, and various attributes of that font
are defined by font descriptors—properties that look like ordinary CSS values but that
describe qualities of the font. A @font-face rule looks like this:
@font-face { font-family: "name of font";
src: url("url of font");
other font descriptors }
The list of other font descriptor properties is long and includes all of the font properties

font-family to find the right one to use. All of these properties can be specified using
the font shorthand property.
There are five generic font families—
serif, sans-serif, cursive, fantasy, and mono-
space—that are used if the user’s computer doesn’t contain a font you specify. A short
list of common fonts is available on all browsers. CSS describes a method for download-
ing fonts on demand, but unfortunately neither of the two competing methods for down-
loading fonts is very reliable.
150 Hour 8
13 0672324091 ch08 6/13/02 10:35 AM Page 150
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Fonts and Font Families 151
8
Browser Support Report Card
CSS Feature Grade Notes
The
font-weight property B+ Inconsistencies among browsers
The
font-variant property B+ Not supported by Netscape 4
The
font-style property A- italic and oblique treated the same
The
font-stretch property D Unsupported
The
font-size-adjust property D Unsupported
The
font shorthand property B+ See other font properties
The
serif generic family A
The

What numeric value (
100 to 900) is the equivalent of the font weight on the word
heavy?
2. How do you write the following properties using the
font shorthand property?
.double { font-weight: 700;
font-family: Verdana, sans-serif;
font-size: x-large;
font-size-adjust: 0.55;
font-style: oblique;
font-stretch: condensed;
font-variant: small-caps; }
3. What are the generic font families that are closest to each of these fonts?
(a.) Verdana
(b.) Times New Roman
(c.) Lucida Handwriting
(d.) Helvetica
(e.) Courier New
Answers
1. The value bold is inherited from the containing box, and it has a value of 700. The
bolder property value increases the inherited value by 100,so the total is 800.
2. Here’s one way to write that rule using the
font property:
.double { font: oblique small-caps 700
x-large Verdana sans-serif;
font-size-adjust: 0.55;
font-stretch: condensed; }
Because font-size-adjust and font-stretch aren’t included in the font short-
hand property, they have to be declared separately. Note that the order of weight,
size, and family is used; hopefully, you remembered that the order does matter for

13 0672324091 ch08 6/13/02 10:35 AM Page 154
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
HOUR
9
Text Colors and Effects
Use of Cascading Style Sheets can transform a plain, boring page of text
into a visual treat, without even using any graphics to do so. The CSS
specifications define ways to visually enhance your textual content, from
changing the colors to adding drop shadows.
In this hour, you’ll learn
•Additional ways to specify the color of text
•Howto use color effectively in Web design
•How to add or remove underlines from your text
•How to add lines through or over your text
•Which CSS property allows you to change the case of your letters
•How to do text shadows in CSS, and which browsers support them
Text Colors
Colors are a key part of conveying information in a visual medium. Giving
distinct colors to certain types of information on a page can emphasize or
14 0672324091 ch09 6/13/02 10:29 AM Page 155
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
de-emphasize the importance; for example, new content can be marked with a bright,
vivid color, and outdated content may be presented in a more muted hue.
As you already know, the
color property is the primary method for setting the fore-
ground color. You can set the background color using the background-color property,
which we’ll look at in detail next hour.
The foreground
color is also used by other properties as a default color value if none is
specified. For example, if a color value is omitted for the border property, the fore-