Inheritance

It’s common to see inheritance in action in real life. Unless some other factor comes into play, it’s often the case that tall parents have tall children, and so on. We can see something similar in CSS Inheritance.

Inheritance is a process of receiving values of properties by a child element from its parent element. 

Only the root element of the document gets the initial value given in the property’s summary.
inheritance controls what happens when no value is specified for a property on an element.

Why Use Inheritance

CSS Inheritance greatly reduces the time and effort required to create a website.
Imagine how much CSS you would have to write to set the color on all children of the body tag.
This would be time-consuming, error-prone, and difficult to maintain.
Similarly, you can imagine what a nightmare it would be if you were forced to set the font-family or font size on every child element of a container.
Inheritance solves these problems and helps you maintain clean code.
It also greatly reduces code redundency

Given Below is an Example

In the above example, we have defined the font-family, font-size, and line-height properties on the body element but all these values are inherited by different elements nested inside body. This brings uniformity to the layout without the need to repeat the same properties on multiple elements.

Example
If the border property was inheritable, setting a border on a single element would cause the same border to appear on all its child elements.
Similarly, if children inherited the background-image property from their parents, the result would be messy.

The emulator below shows this would look  using a CSS keyword value.

Exercise 16.1

Use inherit for the following task.
Refer to the above example and complete the Challenge.