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

Featured Videos



Core Software Performance Optimization Principles

Thread Congestion in Java - Video Tutorial













Close TOC

All Trails

Trail TOC

Page TOC

Previous

Next