CSS Inheritance
Tags: beginners, css
Published: 2019-10-31 21:47:26

---
title: CSS Inheritance
published: true
description: A beginners introduction to CSS inheritance
tags: beginners, css
series: FrontEnd Development Zero to Hero
---
Inheritance in CSS sort of work the same way as an inheritance in humans, in the sense that, a child can inherit _some of his parents attributes_ but not all.

Now, the question is: _What can be inherited in CSS_? Am glad you asked.

The answer is _CSS Properties_.  And just a quick reminder that CSS Properties are the likes of `font-size`, `color`, `background-color` e.t.c

These properties are further classified into two:

* Inherited Properties
* Non-inherited Properties

###__INHERITED PROPERTIES__
From the [Mozilla Developer Network] (https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance#Inherited_properties):

> When no value for an __inherited property__ has been specified on an element, the element gets the computed value of that property on its parent element. Only the root element of the document gets the _initial value*_.

__This translates to__: If you have a parent and child element, and there is an inherited property specified in the CSS rule targeting the parent if this value is not changed in the CSS rule targeting the child element, the child element will make use of the value(s) specified in the parent CSS rule.

Let's take some examples.

_As usual, to follow along create your HTML and CSS files and don't forget to save and refresh your browser to see the changes._

 Given the code snippet below:

```html
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed aliqua.</p>
</div>
```
```css
div {
  font-size: 3em;
}
```
From the code above, it's evident that the paragraph does not have a `font-size` property. But, when you view it in your browser, the paragraph has a `font-size` of `3em` and the browser says "Inherited from div" which makes the `p` the child of the `div` element:

![Inherited property in CSS Firefox 70 Developer Tools](https://thepracticaldev.s3.amazonaws.com/i/4cv5ros4pk7m94zs14iz.PNG)

And if you switch over to the __Computed__ tab, you will realize the paragraph has a computed `font-size` of `48px ` which means it's actually using the `div` element `font-size` property:

![The Computed tab in Firefox 70 Developer Tools](https://thepracticaldev.s3.amazonaws.com/i/dwnlw4opfdapafrcub0x.PNG)

Let's take another example, update your CSS with the following:

```css
div {
  color: green;
  font-weight: bold;
  font-size: 50px;
}
```

Save your file and view in your browser, you will realize that the paragraph is making use of all the declarations given to the `div` element.

![Inherited Properties in Firefox 70 Developer Tools](https://thepracticaldev.s3.amazonaws.com/i/i5wo9evyimi8ylvu6i3n.PNG)

###__NON-INHERITED PROPERTIES__
As the name implies, these are properties that cannot be inherited. But [Mozilla Developer Network]( https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance#Non-inherited_properties) has more:

> When no value for a non-inherited property has been specified on an element, __the element gets the initial value__ of that property.

__This translates to__: If you assign a value to a non-inherited property in the CSS rule of a parent element, the child element won't make use of this value rather it will use the _initial value*_ of this non-inherited property.

Let's take some examples. Update your CSS to match the following code:

```css
div {
  border: 5px solid gold;
}
```

Save your file and view in the browser, you will observe that the paragraph `p` did not inherit its parent border:

![Non-Inherited properties in Firefox 70 Developer tools](https://thepracticaldev.s3.amazonaws.com/i/4nc0lm0r1t4f2qglrhnc.PNG)

Now, you might be thinking: _What if I need the paragraph to use its parent border?_  There are two ways I can think of right now:

1. Adding a `class` attribute to the paragraph in HTML, and explicitly adding the border with CSS. 
2. We allow inheritance to take place.

By now, I am pretty sure you are accustomed to _option 1_, but _option 2_? Maybe, Maybe not.  

We can allow inheritance to take place by using the `inherit` keyword. The `inherit` keyword allows authors (you and me) to explicitly specify inheritance, it works on both inherited and non-inherited properties.

Now, add the following snippet to your CSS:

```css
p {
  border: inherit;
}
```

Save the file and refresh your browser. The paragraph will gladly use its parent border.

![Making Inheritance work in Firefox using the inherit keyword](https://thepracticaldev.s3.amazonaws.com/i/8ftv4hn6qyynbfl7a1ya.PNG)

The list of inherited properties in CSS are listed in the StackOverflow answer below, I'll encourage you to check it out.

{% stackoverflow 5612360 %}

_*The initial value of a CSS property is its default value._

Up next, _The Box Model_.