Inheritance of properties

Inheritance in CSS defines what styles are applied to the element when no value is specified for a property on an element.

Inherited properties

If no value is set for inherited property take the value from its ancestors.

<article>
    <header>
        <h2>Title</h2>
    </header>

    <p>Lorem ipsum...</p>
</article>

article {
    color: red;
}

Examples of inherited properties:

  • font-family
  • word-spacing
  • list-style

Non-inherited properties

If no value set for non-inherited property, it is displayed with an initial value.

header {
    border-bottom: 1px solid black;
}

Tasks

See the Pen by t-i-m-i (@t-i-m-i) on CodePen.

Further reading

results matching ""

    No results matching ""