Tech and Media Labs
This site uses cookies to improve the user experience.




CSS Inheritance

Jakob Jenkov
Last update: 2014-06-15

HTML elements can inherit CSS styles from their parent elements. This is called CSS inheritance. Here is a CSS inheritance example:

<div>
    <p>
        This text inherits the font-size of the parent div element.
    </p>
</div>    
<style>
    div {
        font-family: Aial;
    }
</style>    

In this example the div element has the font-family property set to Arial. This CSS property is inherited by the nested p element, so it will also have its CSS property font-family set to Arial.

HTML elements can inherit styles from more remote ancestors too, and not just from their parents. Look at this example:

<body>
    <div>
        <p>
            This text inherits the font-size of the parent div element.
        </p>
    </div>    
    <style>
        body {
            font-family: Aial;
        }
    </style>
</body>    

In this example the CSS property font-family is set on the body element. This CSS property is then inherited by the div and p elements.

Not all styles are inherited from a parent or ancestor element. Generally, styles that apply to text are inherited, whereas borders, margins and paddings and similar styles are not.

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC