An important principle in CSS is inheritance, which makes it possible to define various CSS features such as color, font, and font size once in a central location instead of assigning the same properties to each individual element again and again.
As you likely already know, an HTML document is built in a tree structure. The various HTML elements have ancestors and descendants, that is, the parent and child elements. Thanks to this relationship, the subsequent child elements inherit many style properties from the superordinate parent elements.
For a more understandable description of inheritance, you should take a closer look at the following simple HTML document:
...
<link rel="stylesheet" href="css/style.css">
...
<body>
<header>Header</header>
<article>
<h1>Inheritance</h1>
<p>1. Paragraph text for article</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p>2. Paragraph text for article</p>
</article>
<p>1. Paragraph text after the article</p>
<p>2. Paragraph text after the article</p>
<footer>Footer</footer>
</body>
...
The body element contains a header element, an article element, two p elements, and a footer element as direct descendants. This makes the body element the parent element of all these elements. Direct descendants of the article element, in turn, are the h1, p, and ul elements. These direct descendants of article are the indirect descendants (or children’s children) of the body element.
Related to this example, the following stylesheet should be applied to the document:
body {
background: gray;
font-family: Arial, Verdana;
color: white;
}
Starting from the body element, due to inheritance, the CSS features set here are inherited from element to element. All elements contained between <body> and </body> get the font family Arial (font-family) and a white font color (color), which was agreed on with the type selector body {...}.
Background (Color) Doesn’t Get Inherited! Even if it seems to be the case in the second figure below, the gray background color (background: gray) doesn’t get inherited. The fact that everything here is nevertheless assigned a gray background color is due to the fact that the default value is transparent (translucent). For this reason, the gray color of the body element is displayed behind all elements. As a counter-demonstration, you’re welcome to use the following universal selector before the body selector to recolor all elements to black, so that none of the HTML elements are transparent from scratch anymore, but black:
* { background: black; }
body { ... }
The CSS rule with type selector body {...} is extended with the following CSS rule for demonstration purposes:
body {
background: blue;
font-family: Arial, Verdana;
color: white;
}
article {
background: lightblue;
color: black;
}
If, as in this example with the article selector, a new inheritable CSS feature is assigned to an element, such as the text color here, the element specified with the selector (here, article) and its descendants no longer inherit the CSS features of the parent element. In that case, the CSS features declared in the selector are inherited by the descendants. For this reason, the descendants of an article element now get a black text color. The font-family of the body selector, on the other hand, wasn’t declared in the article type selector, which is why the font family declared in the body selector (here, Arial) is still inherited by article and its descendants. Again, background is not passed on to the descendants by the article selector, but because of the transparent default background of HTML elements, they are also seen with a light blue background due to the light blue background of the article element.
The next figure shows that the inheritance is valid from the parent element and its descendants onward. The CSS features declared with the body selector apply here from body to the next element, for which new style properties may have been written that make this element the parent of its descendants (as in the example with the article selector).
Default Values for CSS Features: If no specific value has been assigned to a CSS feature, the web browser uses the default value specified for it in the CSS specification when inheriting it.
If this inheritance didn’t exist in CSS, you’d have to explicitly create a CSS rule for each element. Inheritance can help you write a more efficient and concise stylesheet. Often, for example, it’s sufficient to set the font and other CSS features fairly early in the body element, and the inheritance rule makes sure that you don’t have to repeat those CSS features later for each element.
Use Inheritance as Much as Possible: If you master inheritance and use it consciously, you can do without the odd selector or the multiple setting or changing of CSS features. For example, if you’ve set the font with the CSS feature font-family or the font size with font-size for body, this applies to the entire document, and you don’t need to do that again separately for p or li elements. Of course, this also has a positive effect on performance.
Editor’s note: This post has been adapted from a section of the book HTML and CSS: The Comprehensive Guide by Jürgen Wolf.