Inheritance

In CSS, child elements inherit from their parent element, even when the parent element is not the containing block. An element only inherits properties if the element itself does not define that property.

In the example below, you can see that the <body> element has the font property set. All elements within the body will now use the font Georgia, unless something else is specified. And guess what! <h1> has something else specified, so within the <h1> element, Helvetica will be the chosen font.

What will the color of the intro element be?

HTML

<body>
    <h1>Hello inheritance</h1>
    <p class="intro">
        Let me introduce you to the world of inheritance. It's important to learn.
    </p>
    <p>
        If a child element has not defined a property, it will take that property from it's parent.
    </p>
</body>

CSS

body{
    font-family: Georgia, serif;
    color: black;
}

h1{
    font-family: Helvetica, sans-serif;
}

.intro{
    color: #FAA21B;
}

That is correct, as intro has specified it's own color property, that rule will be chosen (because it's more specific).

PreviousDocument flowNextMore pseudo-classes

Last updated