Chapter 4
this with the font-size property, and by applying the declaration to the body element every other element
on the page will inherit the same value. Listing 4-47 shows the style rule with a font-size declaration
added, setting the base size to 14 pixels.
Listing 4-47. A font-size declaration has been added to the body style rule
body {
font-family: Calibri, Helvetica, Arial, sans-serif;
font-size: 14px;
}
Figure 4-34 shows the change in text size.
Figure 4-34. Text rendered at the browser’s default size, then at 14 pixels
The heading, an h1, is also just a bit smaller than it was previously. The default font size of headings is
relative to the base size for normal text. When the font size changes for the body element, the headings
change in proportion to that value. But if you’re not happy with the heading at its default size, you can
modify it with a new style rule—this time for the h1 element, as you see in Listing 4-48. Thanks to
inheritance, there’s no need to restate the desired font family, only the font-size property with the new
size to use for h1 elements.
Listing 4-48. Adding a new rule to declare the font-size of the h1 element
body {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 14px;
}
h1 {
font-size: 160%;
}
You can see the results in Figure 4-35, with a slightly shrunken heading.