home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  

Book HomeCascading Style Sheets: The Definitive GuideSearch this book

5.5. Using Shorthand: The font Property

All of these properties are very sophisticated, of course, but using them all could start to get a little tedious:

H1 {font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 30px; 
   font-weight: 900; font-style: italic; font-variant: small-caps;}
H2 {font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 24px;
   font-weight: bold; font-style: italic; font-variant: normal;}

Some of that could be solved by grouping selectors, but wouldn't it be easier to combine everything into a single property? Enter font, which is the shorthand property for all the other font properties (and a little more besides).



[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>

Initial value

refer to individual properties



Applies to

all elements

Generally speaking, a font declaration can have one value from each of the other font properties. Thus the preceding example could be shortened, while having exactly the same effect as the preceding example (illustrated by Figure 5-31):

H1 {font: italic 900 small-caps 30px Verdana, Helvetica, Arial, sans-serif;}
H2 {font: bold normal italic 24px Verdana, Helvetica, Arial, sans-serif;}
Figure 5-31

Figure 5-31. Typical font rules

I say that the styles "could be" shortened in this way because there are a few other possibilities, thanks to the relatively loose way in which font can be written. If you look closely at the preceding example, you'll see that the first three values don't occur in the same order. In the H1 rule, the first three values are the values for font-style, font-weight, and font-variant, in that order, whereas in the second, they're ordered font-weight, font-variant, and font-style. There is nothing wrong here, because these three can be written in any order. Furthermore, if any of them has a value of normal, that can be left out altogether.

H1 {font: italic 900 small-caps 30px Verdana, Helvetica, Arial, sans-serif;}
H2 {font: bold italic 24px Verdana, Helvetica, Arial, sans-serif;}

In this example, the value of normal was left out of the H2 rule, but the effect is exactly the same as in Figure 5-31.

It's important to realize, however, that this free-for-all situation only applies to the first three values of font. The last two are much more strict in their behavior. Not only must font-size and font-family appear in that order as the last two values in the declaration, but both must always be present in a font declaration. Period, end of story. If either is left out, then the entire rule will be invalid, and very likely ignored completely by a user agent. Thus the following rules will get you the result shown in Figure 5-32:

H1 {font: normal normal italic 30px sans-serif;}   /* no problem here */
H2 {font: 1.5em sans-serif;}   /* also fine; omitted values set to 'normal' */
H3 {font: sans-serif;}   /* INVALID--no 'font-size' provided */
H4 {font: light 24pt;}   /* INVALID--no 'font-family' provided */
Figure 5-32

Figure 5-32. The necessity of both size and family

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.