Demo of CSS Inheritance 01:
font-size - and also the rem unit
- The first demo section demonstrates the compounding effect of a relative font size, in this case:
em
- If the size specified for a font is larger by a relative value, such as em, and not a fixed size, such as px, then the effect of the size increase is magnified each time it is nested.
- In this example the li element is nested within itself whenever there is a sub-list.
- Note that this is also true with the % unit.
- The second demo section uses the unit
rem
and this makes the font size relative to the font size at the root (or initial size) of the file.
Instructor and/or Students:
For general interest:
- Copy this page's code.
- Then see the effect when you change the selector...
- from:
li
- to:
li li
- and then to:
li li li
This section uses the em unit for font-size, the inheritance is not a factor because the font size is relative to the root's font size:
- Lorem ipsum dolor sit amet.
- Reiciendis iusto, atque unde incidunt!
- Illum, aliquid. Ipsa recusandae, quisquam.
- Fugiat, a. Natus minus, ea.
- Esse omnis distinctio nobis unde.
- Earum quos velit maiores fugit!
- Eveniet repellendus est animi illum!
- Quam dolorum odit iste, odio.
- Alias quia voluptates, atque ullam.
- Sequi iste, tempora numquam vero!
This section uses the rem unit for font-size: rem = root em
Inheritance is not a factor because the font size is relative to the root's font size.
- Lorem ipsum dolor sit amet.
- Reiciendis iusto, atque unde incidunt!
- Illum, aliquid. Ipsa recusandae, quisquam.
- Fugiat, a. Natus minus, ea.
- Esse omnis distinctio nobis unde.
- Earum quos velit maiores fugit!
- Eveniet repellendus est animi illum!
- Quam dolorum odit iste, odio.
- Alias quia voluptates, atque ullam.
- Sequi iste, tempora numquam vero!