Learn CSS:

CSS Inheritance

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.

Css Inheritance Example

Css Inheritance Code

Css Inheritance Tutorial

Developers Codes
Graphic Photo World
Frontend Free Code
Crypto Best World
CSS Free Code
PHP Free Code

Feel The Power

Learn CSS:

CSS Inheritance

Css Inheritance Example

Css Inheritance Code

Css Inheritance Tutorial