HTML and CSS Reference
In-Depth Information
Now consider a list as an example to demonstrate inheritance:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 3</li>
</ul>
</li>
</ul>
Say the
<body>
element has a font size of 16px and you give a list item a font size of 2em, like so:
li {
font-size: 2em;
}
In this case, Item 1 and Item 2 in the list have a calculated font size of 32px, but because Item 3 is a child of Item 2,
it first inherits the calculated font size of 32px. Then the browser calculates 32px × 2em, giving it a font size of
64px.
To avoid this, you could just set the font size on the
<ul>
, like so:
ul {
font-size: 2em;
}
Setting the size this way makes each list item inherit the same font size, and they all become 32px. Sometimes this
result isn't avoidable, though, and you need to do the following to adjust Item 3:
li {
font-size: 2em;
}
li li {
font-size: 1em;
}
Here, Item 1 and Item 2 are 2 em, making them 32px (32px = inherited value (16px) × 2em). Item 3 inherits the font
size of 32px; then the browser calculates 32px × 1em, giving it the same font size as its parent element.
Although ems may sound troublesome at first, they're key to creating responsive websites. They allow you to
quickly scale text (and other elements) in size, which is essential for making a website accessible across many differ-
ent devices. In older versions of Internet Explorer, a web page that uses ems allows users to scale text themselves via
built-in browser options.
There is a nice trick you can use to make working with ems a little easier:
1.
In styles.css, find the font size you applied to the
body
selector:
font-size: 1em;
2.
Change its value to
62.5%
:
