Technical Communication/Vocabulary

CSS Inheritance: Using the Right Terms

How to add a font that can be used throughout a CSS document

aliceyt
aliceyt
Oct 16 · 4 min read

You probably know how to add a font that can be used throughout a CSS document: you add afont property to the body selector.

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?

Explicit inheritance

Let’s demonstrate the above with an example using theborder property.

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 thechild-two element: a second blue border has formed around it.

Implicit inheritance

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:color.

When we declare color: orange on the parent element, the color property is implicitly inherited by its child elements, child-one and child-two. You can see this by viewing your HTML file in your browser’s Developer Tools.

Screencap of styles applied on child-one

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 thechild-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.

Screencap of styles applied on child-two

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 afont-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.


Better Programming

Advice for programmers.

aliceyt

Written by

aliceyt

Read to write and 📝 to 📖 || Articles are organised by category on https://github.com/tiffam/medium_articles

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade