Difference between CSS initial and inherit

We know there are two terms i.e. initial and inherit in CSS. But many of us don’t know how to use it properly in CSS. So in this tutorial, I am trying to explain where we can use initial and inherit.

What is inherit in CSS?

Basically, inherit keyword take property from its parent. So take an example to understand this.

Also Read: How to make certain text unselectable with CSS?

.parent{
  color: red;
}

.parent1{
  color: blue;
}

.child{
  color: inherit;
}
<div class="parent">
  <p class="child">
    I am inherited from parent.
  </p>
</div>

<div class="parent1">
  <p class="child">
    I am inherited from parent1.
  </p>
</div>

In the above example, the first “child” class is the child of “parent” class. The second “child” class is the child of “parent1” class. So the first child class color is red and the second one is blue. If we don’t explicitly declare “inherit” to an element, it will automatically set as inherit.

What is initial in CSS?

Now the initial keyword is used when we want to show its default value as defined in CSS specification. For example, if we changed the above “child” class color property to initial it will automatically show its default value. See the below code-

.parent{
  color: red;
}

.parent1{
  color: blue;
}

.parent .child{
  color: initial;
}

.parent1 .child{
  color: inherit;
}
<div class="parent">
  <p class="child">
    I am not inherited from parent.
  </p>
</div>

<div class="parent1">
  <p class="child">
    I am inherited from parent.
  </p>
</div>

So you can see the above example where we set the first child class color property inside parent class set to initial and second child class inside parent1 class set to inherit. So first child class font color is black instead of red as the parent class font color is red. So whenever we set initial, it always set it’s default color i.e. black.

But for the second child class inside parent1 class shows the blue color as we set second child color property to inherit.

So the conclusion is initial show its default value of an element whereas inherit shows the parent class property. In case the is no value in the parent class, it will automatically use initial.

See the JSFiddle for live demo.

About Ashis Biswas

A web developer who has a love for creativity and enjoys experimenting with the various techniques in both web designing and web development. If you would like to be kept up to date with his post, you can follow him.

Leave a Comment