CSS Inheritance: An Introduction

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.

CSS Inheritance - Inherit the Kingdom

If you set the color on a container element to green, then unless some rule overrides that color value, the color of all the elements inside the container will be green. The mechanism through which the value of certain properties is passed on from parent elements to child elements is called inheritance.

In this article, you will learn about different aspects of inheritance and how it affects the appearance of different elements.

How is CSS Inheritance Useful?

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.

Look at the following demo:

See the Pen CSS Inheritance example by SitePoint (@SitePoint) on CodePen.

Here I’ve 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.

Only Certain Properties are Inherited

In real life, not all attributes of parents are passed on to their children. The same is true in CSS; not every CSS property is inherited by default by child elements. In fact, if all properties were inherited, the effect would be similar to having no inheritance at all and you would have to write a lot of CSS to override this behavior.

As an 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 following CodePen example demonstrates how this sort of thing would look using a CSS keyword value that I’ll discuss in the next section:

See the Pen How Borders Would Work if they Inherited by Default by SitePoint (@SitePoint) on CodePen.

Forcing Inheritance

Generally speaking, whether or not to make a property inheritable comes down to common sense. For example, in addition to the examples discussed in the previous section, you probably don’t want all the children of an element to inherit the padding value of their parent. However, you would often prefer if the color of text or the font used for different child elements of a container was the same.

In some cases, a specific property may not be inheritable but you might still want it to be inherited from the parent element. This can be achieved by setting the value of that property to inherit for the child element:

[code language=”css”]
.some-child {
color: inherit;
}
[/code]

Let’s say you want the color of all link elements on your website to be the same as the color defined on their parent element. There are a couple of ways to do this. You could use different classes for links and container elements with different colors, for example. However, one of the cleanest ways to do this is by using the inherit keyword.

Once the color property of the link elements is set to inherit, they will start inheriting the color of their parents:

Continue reading %CSS Inheritance: An Introduction%


Source: Sitepoint