Aymen Kareem Aymen Kareem - 1 month ago 14
CSS Question

How HTML Inheritance works with conflicting styles rules in CSS?

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

<p>
element inside the body in the same time, the
<p>
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?

Answer

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.