How HTML Inheritance works with conflicting styles rules in CSS?


Tags: html,css

Problem :

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?



Solution :

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.


    CSS Howto..

    How to change CSS of website if accessed through a mobile browser [closed]

    How to draw an inner div over an outer div using css?

    how to load a css for Safari only?

    How do I make the textbox close to the text label

    If I have 3 elements, how do I only allow one to be highlighted when clicked at any one time? - CSS, jQuery

    How to implement ::ms-clear in CSS?

    how to change the css of default select2 placeholder color?

    How To Refer To CSS Background Image in Visual Studio?

    How can I set -webkit-mask-box-image through javascript?

    How to change font size of the first option tag in a dropdown menu (select)?

    How to have img popout when containing div is clicked (Image gallery)?

    How to remove or reset CSS style using JS?

    How do I display an empty div tag with CSS?

    show loading image before the content loads through jquery or ajax

    how to write browser specific css properties?

    How to change H3 color in bootstrap using CSS file

    How to add padding to a ul/li menu with a background image?

    When using WebFont loader, how to hardcode the css?

    how to accomplish this border effect in css?

    How to divide HTML into two distinct areas, as if using frames?

    Rails 4 -how to write a view that displays instances in alternating format

    Something in my CSS is causing a random white bar to appear, how do I fix it?

    How to set width of an element in %

    How to reverse jQuery css styling?

    How to Include CSS and JS files via HTTPS when needed?

    I need to edit the css properties of a link when it's active (a:active) with jquery after they have been set by normal html css. How do I do that?

    css3 : how to make div go up to bottom of page?

    How do I vertically centering text inside a responsive box that has a (fluid height) [duplicate]

    How to use nested p tags in CSS and Bootstrap boxes?

    How to display a div forcefully