HTML and CSS Reference
In-Depth Information
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.
