Font: The All-Purpose Property .................................................................
Throughout this chapter, you’ve seen all the many ways you can specify how
a typeface should look, using font-this and font-that properties, like this:
p {font-family: Garamond; font-size: 26px;
font-weight: bold; font-style: italic;}
However, you can use a shorthand to create CSS style definitions for type-
faces: Just use the all-purpose fontproperty. That way, you can leave out
specifying each property name (font-weight, font-family, and so on).
Just list the values you want and the browser correctly interprets them. It
can tell, for example, that the boldvalue can be used only with the font-
weightproperty, and not with font-size, font-variant,or the font-
familyproperties.
This same shorthand feature is available for many other CSS properties, such
as the borderproperty. Borders can be specified using hyphenated properties
such as border-bottom, but the shorthand borderproperty, followed by a list
of values, also works. Whether you use the long or abbreviated format is up
to you.
Normally, letting the computer take the burden off the designer or program-
mer like this is useful. However, as you might expect, the fontproperty isn’t
as straightforward as it could be. You must memorize and be sure to follow
some silly rules, or the browser ignores your style entirely (and, of course,
provides no error message to warn you or help you fix the problem).
But if using abbreviations is your thing, go ahead and try out the fontprop-
erty. The pstyle in the previous example can be condensed in the following
way by using the fontproperty, like this:
p {font: bold italic 26px Garamond;}
Both styles will have the same result, but this condensed version saves some
time if you remember the rules! Here are the rules:
The first two values in the list (styleand weight) can be listed in any order.
For example, you can reverse the preceding order with no ill effects:
p {font: italic bold 26px Garamond;}
You can also throw in a font-variant(small-caps) if you wish, and mix and
match those first three values any way you want. The browser accepts those
values in any order.
However, the last two values must be in size, familyorder. They mustbe the
final two values in the list, both must be present in the list, and they mustbe
in size, familyorder.
100 Part II: Looking Good with CSS
