CSS inheritance is about what happens if no value is specified for a property on an element.
If no value is specified for a property, the value can either be inherited from the parent element, or be set to its initial (default) value.
For CSS inheritance, properties are categorized in two types:
- inherited properties
- non-inherited properties
Inherited Properties
Inherited properties are, by default, set to the computed value of the parent element.
Properties related to text, such as color , font-family , font-size , line-height , and text-align , are typically inherited. This ensures consistent text styling throughout a document.
In the following example, the text inside the <strong> element will appear in 20px and in blue, since the <strong> element inherits the color and the font-size value from the parent (<p>) element.
Example
<style> p {
color: blue;
font-size: 20px;
}
</style> <body> <p>This
is a paragraph with some <strong>important</strong> text.</p> </body>Live preview
Non-inherited Properties
If there is not set a value for a non-inherited property, the value is set to the initial (default) value of that property.
Properties related to the box model or layout, like border , background , margin , padding , width , and height , are typically not inherited.
In the following example, the <strong> element, inside the <p> element, will not have an additional border (since the initial value of border-style is none).
Example
<style> p {
border: 1px solid red;
}
</style> <body> <p>This
is a paragraph with some <strong>important</strong> text.</p> </body>Live preview
The inherit Keyword
The inherit keyword is used to explicitly specify inheritance. It works on both inherited and non-inherited properties.
In the following example, the <strong> element, inside the <p> element, will have an additional border, since we have used the inherit keyword to explicitly specify that the border value should be inherit.
inherit