HTML and CSS Reference
In-Depth Information
font-size: 62.5%;
3.
Save styles.css.
Here, you tell the browser to make the body's font size 62.5% of its default size (inherited value (16px) × 0.625 =
10px). Now 1 em is the equivalent of 10px, 1.2em is 12px, and so on. Figure 4-3 shows this in action.
Figure 4-3
The Cool Shoes & Socks page with a font size of 62.5% (10px).
Yikes! As shown in Figure 4-3, the text is much smaller now! You can fix that:
1.
In styles.css, below the rule set for the
body
selector, add the following:
#header, #main, #footer {
font-size: 1.6em;
/* inherited value (10px) x 1.6em = 16px */
}
2.
Save styles.css.
Ems can be used for many more properties. You will see examples of this later in the topic.
