This chapter is from the book
This chapter is from the book
This chapter is from the book
Setting Multiple Font Values
Although you can set font properties independently, it is often useful, not to mention more concise, to put all font elements in a single definition. To do this, you use the font property.
This example (Code 3.6 and Figure 3.13) shows a level 1 header tag being defined, along with a class called copy that will be applied to paragraphs of text. In addition, the level 3 header tag is defined with the shorthand font style (see the sidebar "Using the Visitor's Styles" on the next page).
Code 3.6. The <h1> tag and copy class have had the various font styles set at the same time, while the <h3> tag uses a shorthand value to mimic the caption style.
<html>
<head>
<style type="text/css"><!--
h1 {
font: bold italic small-caps
→ 2.5em/3em 'minion web', Georgia,
→ 'Times New Roman', Times, serif;
}
h3 {
font: caption;
}
.copy {
font: 10px/20px Arial, Helvetica,
→ Geneva, sans-serif;
}
--></style>
</head>
<body>
<hr>
<h1>Alice's Adventures In<br>
Wonderland</h1>
<h3>Lewis Carroll</h3>
<hr>
<h3>CHAPTER I<br>
Down the Rabbit-Hole</h3>
<p class="copy">Alice was beginning to
→ get very tired of sitting by her sister
→ on the bank...</p>
</body>
</html>
)
Figure 3.13 You can set all the font properties (and the line height) in a single definition and even instruct the page to use styles defined by the visitor's computer.
To define several font attributes simultaneously in a rule:
-
font:
Type the property name font, followed by a colon (:). Then type the values in the following steps (Table 3.9):
Table 3.9. font Values
Value
Compatibility
<font-family>
IE4, N4, S1, O3.5, CSS1
<font-style>
IE4, N4, S1, O3.5, CSS1
<font-variant>
IE4, N4, S1, O3.5, CSS1
<font-weight>
IE4, N4, S1, O3.5, CSS1
<font-size>
IE4, N4, S1, O3.5, CSS1
<font-height>
IE4, N4, S1, O3.5, CSS1
<visitor-style>
IE5, N6, S1, O3.5, CSS2
bold
Type a font-weight value, followed by a space (see "Setting Bold, Bolder, Boldest" earlier in this chapter).
italic
Type a font-style value, followed by a space (see "Making Text Italic" earlier in this chapter).
small-caps
Type a font-variant value, followed by a space (see the previous section, "Creating Small Caps").
2.5em
Type a font-size value (see "Setting the Font Size" earlier in this chapter).
/3em
Type a forward slash (/), a line-height value, and a space (see "Adjusting Text Spacing" in Chapter 4).
'minion web', Georgia,
→ 'Times New Roman', Times, serif;
Type a font-family value and closing semicolon (refer to "Setting the Font" earlier in this chapter).