This chapter is from the book
This chapter is from the book
This chapter is from the book
Setting the Font Size
HTML gives you seven font sizes, but these are all relative to a default size set by the visitor. With CSS, you can specify the size of the text on the screen using several notations or methods, including the traditional point-size notation, percentage, absolute size, and even a size relative to the surrounding text. Figure 3.5 shows text in different sizes.
)
Figure 3.5 A few font sizes.
In this example (Code 3.2 and Figure 3.6), I define the class copy to use a font size of 12 pixels and then apply it to paragraphs of text.
Code 3.2. The font size for the class copy has been set to 12 pixels, blockquotes will appear with a 2-em indent, and level 3 header tags will appear large(r) than the parent's text—which, in this case, is the default size set for the browser.
<html>
<head>
<style type="text/css"><!--
.copy {
font-size: 12px;
}
blockquote {
font-size: 2em;
}
h3 {
font-size: large;
}
--></style>
</head>
<body>
<h3> CHAPTER II<br>
The Pool of Tears</h3>
<p class="copy">'Curiouser and curiouser!'
→ cried Alice...</p>
<blockquote>
ALICE'S RIGHT FOOT, ESQ.<br>
HEARTHRUG,<br>
NEAR THE FENDER,<br>
(WITH ALICE'S LOVE).
</blockquote>
</body>
</html>
)
Figure 3.6 The size of the font helps determine its legibility and the emphasis it receives on the page. Titles usually are larger than copy, but some text needs a little more attention.
To define the font size in a rule:
font-size:
Type the property name font-size, followed by a colon (:).
-
12px;
Type a value for the font size, which could be any of these options:
- A length unit (usually, the font size in points)
- An absolute expression that describes the font size; the expressions are xx-small, x-small, small, medium, large, x-large, and xx-large
- smaller or larger, to describe the font size in relation to its parent element (see "Inheriting Properties from a Parent" in Chapter 2)
- A percentage, representing how much larger the text is in proportion to the size of its parent element (75%, for example)
See Table 3.5 for a list of font-size values and their browser compatibility.
Table 3.5. font-size Values
|
Value |
Compatibility |
|
<length> |
IE4, N4, S1, O3.5, CSS1 |
|
<percentage> |
IE4, N4, S1, O3.5, CSS1 |
|
smaller |
IE4, N4, S1, O3.5, CSS1 |
|
larger |
IE4, N4, S1, O3.5, CSS1 |
|
xx-small |
IE4, N4, S1, O3.5, CSS1 |
|
x-small |
IE4, N4, S1, O3.5, CSS1 |
|
small |
IE4, N4, S1, O3.5, CSS1 |
|
medium |
IE4, N4, S1, O3.5, CSS1 |
|
large |
IE4, N4, S1, O3.5, CSS1 |
|
x-large |
IE4, N4, S1, O3.5, CSS1 |
|
xx-large |
IE4, N4, S1, O3.5, CSS1 |