What is the difference between initial and inherit in CSS

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 takes property from its parent. So take an example to understand CSS initial vs inherit.

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 the “parent” class. The second “child” class is the child of the “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 its 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” shows the 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 a live demo.