CSS Style Inheritance

The second concept that sounds reasonable to introduce you to after learning Style Precedence is style inheritance. Commonly utilised in nearly every stylesheet and one which can eliminate many poor coding practices, style inheritance is the system by which elements inherit their styles from their parents.

In this chapter we will take a look at how this whole inheritance mechanism works in CSS, how it simplifies design problems and then finally how it can be implemented using the inherit value.

So let's begin to inherit some CSS knowledge.

Style inheritance can be defined as:

Take note of the word "certain" in this definition - it illustrates an important point which we will be discussing shortly.

Style inheritance is very useful in terms of simplifying many design problems such as typography of a web page, color of the text, and so on by eliminating the need to repeat the respective properties for the problem discussed above in all selectors.

Anyways, let's put this definition aside for now and see how inheritance works at the basic level using a very simple example.

<div>
    A div
    <p>A paragraph</p>
</div>

div {color: blue}

Here we have defined a color for the div element. This means that at least any text directly written within it will be given the color blue, for example 'A div' in this case in line 2.

But let's take this into another dimension.

It would be blue! Why? Because the property color gets inherited down the descendants of the div which in this is the element p. We say that the color of p gets inherited.

When we talk about style inheritance; we are talking about parents and descendants and their nesting in each other. Inheritance only applies to descendants of a given element with styles set on it.

Furthermore inheritance only works for inheritable properties. So what are these?

Inheritable properties in CSS can be defined as those properties that are:

Obviously, not all properties are considered inheritable and the reason behind this is very logical.

For instance margin is a non-inheritable property and therefore does not get inherited down a descendant chain. Imagine for a second that you gave 10px margin to body and later found out that every element had that 10px of margin around it - totally frustrating and clearly not what you would've wanted!

In contrast, font-family is inheritable, as you might be able to justify. Setting a certian font-family on body makes all the nested elements take up that same font. If this wasn't the case then even just to get a single font established on a web page you would've had to include font-family in every selector - again not what you want and what doesn't makes any sense at all!

CSS properties, if defined technically, can include a value of true or false to indicate whether they are inheritable or not.

And determining whether a property is inheritable or not doesn't require going over its formal specification; one can determine this all on his own if he at least knows the purpose of the property.

Let's see whether you can distinguish between inheritable and non-inheritable properties on your own! In the following questions determine which characteristic goes best with the given property.

So how did you find out this quiz. Was it easy to determine inheritability or not?

Perhaps the most important thing in style inheritance is the understanding of the property value inherit.

inherit basically works on the concept of style inheritance, as even the name might suggest.

It simply makes the property, on which it is set, inherit its value from the parent. If the parent has got any value of the respective property directly set on it or further inherited from its parent, that value will come in place of inherit.

Confused? The following example will clarify all this wordings mess.

First let's take a look at the initial illustration of the code.

<div id="parent">
    <div id="child">A div element</div>
</div>

#parent {
    padding: 20px;
    background-color: #ddd;
}
#child {
    background-color: white;
}

And now over to some inheritance.

Following we set a padding on the #child element and give it a value of inherit. This makes the property inherit its value from its parent i.e whatever is the padding is of the #parent in this case will be the padding applied to #child.

#child {
    padding: inherit;
}

As you can see the element #child gets a padding of 20px, which is the padding of its parent #parent.

And with this you complete another paramount concept in CSS foundation - style inheritance.