Understanding The CSS Values, inherit, initial and unset

Paul Ryan Codes
Oct 1, 2018 · 2 min read

I will keep this post short, I find that sometimes these values can be over complicated so I am going to keep it simple.

Inherit

Inherit is probably the easiest to understand, what it basically says is, ‘I will inherit this value from my parent’.

// HTML
<div class = 'parent'>
<div class = 'child'></div>
</div>
/CSS
.parent{
background-color: red;
}
.child{
background-color:inherit
}

In the above example, the child will have the background-color:red as it is inheriting this value from it’s parent.

Totally simples! 👍

Initial

Initial says, ‘hey just take the browser default for this value’.

.text{color:initial} 

The text class here will have the color black as this is the default for the browser.

If you are interested in what browser defaults there are, then head here.

Unset

Unset can sometimes confuse people, but it is really quite simple.

Unset says, ‘if there is a parent with a matching value, then I will act as inherit, otherwise I will act as initial’.

// HTML
<div class = 'parent'>
<div class = 'child'></div>
</div>
/CSS
.parent{
background-color: red;
}
.child{
background-color:unset;
color: unset;
}

So this time the child class has two css properties ( background-color& color) , we give these two properties the value of unset.

So for the background-color, it will inherit the background-colorfrom it’s parent whereas the colorproperty will be set to the browser default i.e. black as the parent does not have a colorproperty.

I created the following codepen to showcase this.

Conclusion

There you have it, in around 1 minute I have explained these 3 css values and showed just how simple they are.

I hope you learned you something :).

If this helped….

If you learned something useful here, you can buy me a coffee to keep me well refreshed. If you’re like, ‘fuck that guy, he can buy his own coffee’ , then it be great if you could leave a clap and if you’re like ‘fuck that guy, he can clap for himself’, well then……. fuck you! 😄

Paul Ryan Codes

Written by

Developer hailing from Ireland. { http://paulryancv.com/ } Kicking Ass with StitcherAds

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade