In this section, we will learn about the concept of inheritance and cascading in CSS.
Inheritance and Cascading in CSS
Inheritance is the way of letting a child element uses properties of its parent to format itself.
It helps us as developers to design a webpage faster, cleaner, and with a less amount of codes.
The first note you should always remember is the fact that styles we create for each element aren’t the only styles that browsers apply to elements.
There are other styles as well, which are called browsers default styles.
The styles that we create are called author styles.
If an element does not have any author style applied to it, it will inherit browser’s default styles.
The priority of browsers-default-styles is low and your styles can override them.
Example: font inheritance in CSS
In the example below, we format the <body> element to have the red color for its content using “color” property. In this case, the entire elements that are children of the <body> element will have a red color for their content as well and this is because of inheritance!
Alright, first let’s see the example below and then we will continue our discussion related to inheritance.
See the Pen font inheritance in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
How Does Inheritance Work in CSS?
In the example above, we have two elements <h1> and <p> with text content.
When it comes to the color of a text, browsers first check the element that has the text, if explicitly a value was set for the color property of that element, then the defined color will be applied to the text content. But if there wasn’t any explicit value, browsers use inheritance to get a value for this property! In this document, for example, browsers first check the <div> element to see if it has set the value of the color property or not. But we can see the <div> element doesn’t have a value for the color property! So browsers assume that this element is inheriting the value of the color property from its parent (which is the <body> element). So now, the <body> element will be checked and for this particular example, we’ve explicitly defined a value for this property here in the <body> element. So the defined value will be inherited and used for the text content of the <h1> and the <p> element.
Note: if no element in the chain of parent elements had the value for the target property, then at the end the browser’s standard value (the default value) will be used for the target property. For example, the default value for color property is black.
CSS inherit Keyword
You should know that a child element will not inherit all the properties of its parent. Basically, some properties are inheritable and some aren’t, unless you force them to inherit their values from the parent element!
This is where the `inherit` keyword comes in!
When we set the `inherit` keyword as the value of a property, we’re telling browsers that they should put the value of the parent element of the same property for the child element as well.
Using the `inherit` keyword is basically a forced inheritance. (We’re making parent elements to give their values of the target property for the child elements).
inherit Keyword in CSS Syntax:
To use the `inherit` keyword, all we need to do is to assign this value to a CSS property.
For example:
selector{
border: inherit
}
In this example, we’re forcing the parent element of the target of the selector to give whatever value it has for its border property to the child element/s.
Note: you might be asking, what if the parent element didn’t have any value for that target property then? Well, in that case if the target property by default inherit its value from the parent element, then the search for a value will continue the chain of parent elements until we either reach a parent element that has an explicit value or we end up getting the browser default value (the color property is an example of properties that inherit their values by default). But if the target property does not inherit its value by default (like the border property) and the parent element didn’t have any value for that property either, then using the `inherit` keyword won’t do much for us! Basically, we will end up getting the default value for that property anyway (So no search in the grandparent elements to find an element with an explicit value for the target property).
Example: using inherit keyword in CSS
See the Pen using inherit keyword in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
In the example above, the <p> element sets the value of the `border` property to inherit from the parent element. Here, the parent element <div> has an actual value for this property and so it will be used for the child elements. That’s how we get the blue border around the <p> element as well.
But, if the <div> element didn’t have any value for this property, then the <p> element will stick to the default value of this property (which is no-border) even though the grandparent of this element (the <body> element) has an actual value for the `border` property!
For example:
See the Pen For example: by Enjoy Tutorials (@enjoytutorials) on CodePen.
