CSS Inheritance: Using the Right Terms
How to add a font that can be used throughout a CSS document
You probably know how to add a font that can be used throughout a CSS document: you add a
font property to the
But did you know this is called inheritance? Just knowing how to write CSS may not be enough when you need to talk or write about your code—perhaps you need to take someone through your CSS at an interview. Whatever the reason, it’s beneficial to know the right terms to use.
In this article, I’ll talk about the use of inheritance while emphasizing the proper terms you should take note of in italics.
What Is Inheritance?
Inheritance simply means passing property values from parent elements to their children. There are two ways for a child element to inherit properties.
A property can be explicitly inherited by a child element when you set the value of
inherit to the declared property.
Let’s demonstrate the above with an example using the
When I declare
border: 1px solid blue on the parent element, the parent element is styled with a thin blue border. This style is not inherited by its child elements, as border property is not an inherited property based on W3C’s property listing.
However, I can “coerce” the child to inherit its parent’s border style by declaring
border: inherit on the child element.
Below is the result of declaring
border: inherit on the
child-two element: a second blue border has formed around it.
The other way is by implicit inheritance. This happens when the child element inherits a property from its parent element without using the value
inherit. It is only applicable to inherited properties as defined in W3C’s property listing.
Note: W3C has a full property table that provides a good overview of properties and their initial and inherited values. However, you should do your own checks if you intend to use it, as some sections are outdated.
Let’s demonstrate the above with an example using one of the inherited properties:
When we declare
color: orange on the parent element, the
color property is implicitly inherited by its child elements,
child-two. You can see this by viewing your HTML file in your browser’s Developer Tools.
We can override the inherited property of a child element by declaring a value on that property.
In our example, when I declare
color: green on the
child-two element, its inherited color gets overridden by the color green. You can see this by inspecting the element in DevTools. The inherited color of
child-two still shows up under the Styles tab, but it is now strikethrough to show that it has been overridden.
Inheritance helps us reduce repetition in our CSS, as it enables us to extend the styles applied on a parent element to their child elements. Think about how many times you would have to declare a
font-family property in your stylesheets if we didn’t have CSS inheritance, and that will give you a greater appreciation of it.
Do note that regardless of the type of inheritance, the property values from its parent element may not be the actual value for a property of the child element. The actual value depends on value processing.