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..

    jQuery - failed show/hide buttons

    How to set a image over another in the same tag via CSS?

    How can I resize svg using CSS?

    How to make a div snap to min or max size, without any sizes in-between?

    jQuery glowing animations : how to improve?

    How to use jQuery to detect loaded background image after inserting out CSS

    How to show div of google maps after hidding it

    CSS how to revert SVG animation on mouseout from current frame

    How to create rounded shape by CSS

    How can I apply a style to element if the user came to website using a link with an anchor/hash [closed]

    How to show a background color over the full width when zooming in?

    how to display image on mouse over by css

    How to add Css classes in TinyMCE editor Styles drop down through coding

    How to :hover one div on two other divs and make it dynamic with JS/JQuery?

    How can I make a two column layout's main div auto fit to browser width?

    After ul li's float left ,how can I make text-align center?

    How do you make the colour of a h1 tag to change if the user hovers over the body in css and html?

    How to make a simple plus one voting system in code igniter

    How to limit click area to text?

    CSS/Menu: How to position element right below/beside elements

    How to achieve a fancy outline around an image in CSS

    How to add css class to style.css?

    How to Make Auto Size Horizontal Line DIV using css?

    How to convert UPPERCASE text to Title Case using CSS

    how to target IE 6 AND IE7 in css

    How to sort properties in CSS file by groups?

    How to detect single letters and modify their look/css

    How to target this HTML in CSS?

    jQuery: How to get DIV to slide-off the screen and another to slide in?

    how to get a css slide transition using bootstrap modal and angular ui?