Aymen Kareem Aymen Kareem - 2 months ago 17
CSS Question

HTML Inheritance and font-size property

I just got confused when reading on HTML inheritance and when implementing font-size property in CSS.

As it is mentioned in the book that I'm reading, the cascade mechanism governs how styles are applied when conflicting rules apply to the same elements. So, when you adjust font-size property in the body and in the

element inside the body in the same time, the
element font-size should override.

However, this didn't happen when I used the following code:

body {
font-size: 62.5%;

<p style="font-size: 1em">In em</p>
<p style="font-size: 16px">In px</p>
<p style="font-size: 12pt">In pt</p>
<p style="font-size: 100%">In percentage</p>

Why? Any explanation?


This is the intended behavior. Font sizes set in px or pt do not inherit from the parent element. 16px is 16px, no matter what. Font sizes set in em or percent are relative to the parent element, so 100% or 1em is the same as the parent font size.