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

Java ForkJoinPool

P2P Networks Introduction




















Advertisements

High-Performance
Java Persistence
Close TOC
All Tutorial Trails
All Trails
Table of contents (TOC) for this tutorial trail
Trail TOC
Table of contents (TOC) for this tutorial
Page TOC
Previous tutorial in this tutorial trail
Previous
Next tutorial in this tutorial trail
Next