CSS Inheritance in more detail -

For the article about cascades click here. This is the second part of basic CSS methodologies, and it will be on the topic of inheritance and special keywords (inherit and initial).

Let’s take a look at the pen in the last article here. We notice that we set the font-family property to the Google Font we imported in our stylesheet, and we set it using the * (Asterix) selector, which basically selects all elements in our stylesheet. What would happen if instead of the * selector, we would use the <body> selector?

Let’s look at the result:

body {
  font-family: Lato; /* this is a property that will be applied to all the child elements in the DOM */
}

CSS Inheritance - List of my favorite pokemon — List of my favorite pokemon

Nothing changes! Although the procedure in which the font-family property is applied to the document is different when using * and body, we notice something more interesting. All of our ancestor elements within the <body> will inherit this font; there is no need to apply it explicitly to each child element inside our stylesheet.

The image below shows how properties are passed down through the DOM to their child elements.

CSS Inheritance - Inherited properties passing down the DOM — Inherited properties passing down the DOM

An important notion to keep in mind though is that not all properties can be inherited. Some of the most common properties that can be inheritable are color, font, font-family, font-size, font-weight, line-height, letter-spacing, text-align, white-space, and more text-related properties. List properties also inherit, and some of the most common inheritable list properties are list-style, list-style-type, list-style-position, and list-style-image. You can see a full list here.

Using the special values

Inheritance can be manipulated further using two special values: initial and inherit.

Inherit can force inheritance in places where the cascade is preventing it. This will cause the element to inherit any value from the parent element. How we can test this? If you remember we set the text color of our anchor to be black, and we removed the underline which is the original style. What if we move those two rulesets to the parent element (#main-list). We will break our styles!

#main-list {
  list-style: none;
  display: flex;
  color: black; /* we moved these two lines here */
  text-decoration: none;
}

#main-list a {
  /*color: black;
  text-decoration: none; */
  background-color: pink;
  padding: 20px;
  margin: 10px;
  display: inline-block;
  text-align: center;
  border-radius: 6px;
}

CSS Inheritance - Pokemon list. Notice how the CSS 'broke' (the anchor links have the default styling) — Pokemon list. Notice how the CSS ‘broke’ (the anchor links have the default styling)

In order to inherit the rulesets for color and text-decoration from our parent element, we will use the value of inherit for both properties. This is beneficial because now we can edit the parent ruleset (for example using JavaScript) and the anchor should apply these newly changed rules. We can also use the inherit keyword to force the inheritance of a property which is not normally inherited, such as border or padding. With the changes below the script should look as before (having black text and no underline decoration):

#main-list a {
  color: inherit;
  text-decoration: inherit;
  background-color: pink;
  padding: 20px;
  margin: 10px;
  display: inline-block;
  text-align: center;
  border-radius: 6px;
}

Initial keyword on the other hand is used when we already have styles applied that we want to undo. Every CSS property by default, has an initial value, and by using the initial keyword we actually reset the rule to that default value. (a warning if you want to use initial in your styles though, it is not supported in IE or Opera Mini).

In the listing below we have the CSS in which the color has been set to red inside the anchor, but inside the rare class we set the color to initial. Because the color property is by default black (color: black) , the rare element will be black.

#main-list a {
  color: red;
  text-decoration: inherit;
  background-color: pink;
  padding: 20px;
  margin: 10px;
  display: inline-block;
  text-align: center;
  border-radius: 6px;
}

#main-list .rare {
  background-color: salmon;
  color: initial;
}

CSS Inheritance - result of using the listing above — Result of using the listing above

The result

And that is it regarding inheritance. As you probably noticed the concept is tightly coupled with the idea behind cascades and as a matter of fact many starters kinda mix these two concepts up! Hope that this article cleared a bit of the fog regarding inheritance and cascades!

Here we have our codepen for this article:

See the Pen CSS Inheritance by Mehmed (@brachika) on CodePen.

Please check other blog posts on thedukh.com. For more CSS articles click on one of the links below:

Facebook Tweet Pin LinkedIn

CSS Inheritance in more detail

Using the special values

The result

1 thought on “CSS Inheritance in more detail”