CSS Inheritance in more detail
Tags: html, css, codepen
Published: 2021-04-19 20:36:48


Let's take a look at the pen in the last article [here](https://dev.to/bracikaa/how-do-css-cascades-work-d44). We notice that we set the <code>font-family</code>  property to the Google Font we imported in our stylesheet, and we set it using the <code> *</code> (Asterix) selector, which basically selects all elements in our stylesheet. What would happen if instead of the <code> *</code> selector, we would use the <code>&lt;body&gt;</code> selector?

<!-- wp:paragraph -->
<p>Let's look at the result:</p>
<!-- /wp:paragraph -->

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

![List of my favorite Pokemon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2zcxxfof47ga3hc8hhz0.png)<figcaption>List of my favorite Pokemon</figcaption>

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

<!-- wp:paragraph -->
<p>The image below shows how properties are passed down through the DOM to their child elements.</p>
<!-- /wp:paragraph -->

![Inherited properties passing down the DOM](https://i0.wp.com/thedukh.com/wp-content/uploads/2021/04/0957921829_sp0957921829-CHP-3-SECT-3_image01.jpeg?w=768&ssl=1)<figcaption>Inherited properties passing down the DOM</figcaption>

<!-- wp:paragraph -->
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 <code>color</code>, <code>font</code>, <code>font-family</code>, <code>font-size</code>, <code>font-weight</code>, <code>line-height</code>, <code>letter-spacing</code>, <code>text-align</code>, <code>white-space</code>, and more text-related properties. List properties also inherit, and some of the most common inheritable list properties are <code>list-style</code>, <code>list-style-type</code>, <code>list-style-position</code>, and <code>list-style-image</code>. You can see a full list [here](https://gist.github.com/dcneiner/1137601)
<!-- /wp:paragraph -->

# Using the special values

<!-- wp:paragraph -->
<p>Inheritance can be manipulated further using two special values: <code>initial</code> and <code>inherit</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>Inherit</code> 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 (<code>#main-list</code>). We will break our styles!</p>
<!-- /wp:paragraph -->

```css
#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;
}
```

![Pokemon List](https://i0.wp.com/thedukh.com/wp-content/uploads/2021/04/myfavpokemon.png?resize=1024%2C196&ssl=1)<figcaption>Pokemon list. Notice how the CSS ‘broke’ (the anchor links have the default styling)
</figcaption>

<!-- wp:paragraph -->
<p>In order to inherit the rulesets for <code>color</code> and <code>text-decoration</code> from our parent element, we will use the value of <code>inherit</code> 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 <code>inherit</code> 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):</p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p><code>Initial</code> 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 <code>initial</code> 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).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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 (<code>color: black</code>) , the rare element will be black.</p>
<!-- /wp:paragraph -->

```css
#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;
}
```

![Pokemon List](https://i1.wp.com/thedukh.com/wp-content/uploads/2021/04/initial.png?resize=1024%2C196&ssl=1)<figcaption>Result of using the listing above</figcaption>

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!

# The result

Here we have our codepen for this article:

{% codepen https://codepen.io/brachika/pen/bGgKLvY %}

If you liked this article maybe you'll like more stuff on [thedukh.com](https://thedukh.com).