Em units in practice
Example 1
body
{
font-size: 1em;
}
If the default size in the browser is set to 16pt, and text-size in the body selector is 1em, assuming no other element uses the font-size value, the size of the bodytext in the browser will be 16pts, i.e., %100 of the browser default.
Example 2
body
{
font-size: .9em;
}
Using the same browser defaults, if the body element has a font size set to .9em, paragraph text on the page will be 90% of 16pts.
Example 3
body
{
font-size: .9em;
}
p
{
font-size: .9em;
}
Again assuming the same browser defaults, the text-size in the body selector has been set to .9em, and the p selector has also be set to .9em. What will be the size of paragraph text? 90% of the browser default (i.e. 90% of 16pt) or 90% of the text size set in the body element?
The answer is 90% of the size set in the body element - 90% of 90% of 16pts. Because a paragraph element is the child of the body element - the value set in the body selector is inherited before the text size instructions in the p element are applied.
Ok, let's look at an example of how this works in practice, and the possible accessibility pitfalls of ignoring the hierarchical nature of HTML.
Understanding inheritance
Here is an example that illustrates inheritance - the way a child element inherits property values from its parent element.
First the the inline styles:
<div style="font-size: 1em;">
<p>
This paragraph is set within a div with font-size set to 1em, so it should be the same size as the browser default.</p>
</div>
<div style="font-size: .9em;">
<p>This text is contained within a div element that has the font-size set to .9em.
</p>
<p style="font-size: .9em;">
This paragraph is contained with a dive element that has the font-size set to .9em. It is smaller because the font-size of the paragraph tag is also set to .9em.
</p>
</div>
And how those styles are interpreted by a browser that understands style sheets:
This paragraph is set within a div with font-size set to 1em, so it should be the same size as the browser default.
This text is contained within a div element that has the font-size set to .9em.
This paragraph is contained with a div element that has the font-size set to .9em. It is smaller because the font-size of the paragraph tag is also set to .9em.
If your browser does not understand style sheets, here is the CSS inheritance example as a graphic:
The above example reminds us of the importance of understanding inheritance when applying property values to style sheets. This in turn reminds us that well coded Web pages are not just collections of HTML tags, but documents that have been marked up according to a predetermined set of rules designed to expose their logical structures.
Index | Next: Alternative relative units - relative keywords