DEV Community

Cover image for Know this CSS You will not have any pain later on
Phan Công Thắng
Phan Công Thắng

Posted on • Updated on • Originally published at thangphan.xyz

Know this CSS You will not have any pain later on

Something it's very basic, but if we don't know about it, it can give you a lot of pain later on. This post will give you a basic view of inheritance of CSS.

Inheritance CSS

There are four properties we need to know, I'm going to explain each of those for ease of understanding.

  1. Inherit

It's simple. The child element will inherit CSS from the parent.

To illustrate:

<div style="color: red">
  <p style="color: inherit">Child Element</p>
</div>
Enter fullscreen mode Exit fullscreen mode

p element will inherit color of div element. It will be red in this case.

  1. Initial

This property might look a little bit confusing. But you need to remember that it's not default CSS of browser.

What I mean default CSS of browser?

The default CSS of browser is something like:

  • font-weight: bold of h1->h6 elements.
  • font-style: italic of em element.
  • color: blue of a element.
  • etc...

To illustrate:

<h1 style="font-weight: initial">Font Weight Initial Element</h1>
Enter fullscreen mode Exit fullscreen mode

What font-weight do you expect h1 will be? Is it bold?

No, bold is default CSS of browser, It's not initial value. The initial value of font-weight is normal. In this case, h1 element will be an element that has a normal weight.

The initial value of CSS is something like:

  • color: initial -> color: black
  • font-weight: initial -> font-weight: normal
  • background: initial -> background: white
  • etc...
  1. Unset

This property makes the element's CSS either inheritance or initial value(if it's not inheritance)

To illustrate:

<div style="color: red">
  <p style="color: unset">Unset Element</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Unset Element will be red as the example above, but as black in the example below. Because it's not inherited, then it will take the initial value. In this case, the initial value of color is black.

<div>
  <p style="color: unset">Unset Element</p>
</div>
Enter fullscreen mode Exit fullscreen mode
  1. Revert

This value will revert the CSS of element back to default CSS of the browser.

To illustrate:

<h2 style="font-weight: unset">Unset Element</h2>
<h2 style="font-weight: revert">Revert Element</h2>
Enter fullscreen mode Exit fullscreen mode

h2 with unset CSS will take the initial value of font-weight(normal) to behavior.

h2 with revert CSS will take the default CSS of the browser font-weight(bold) to behavior.

And this is the result:

  • Unset Element
  • Revert Element

Conclusion

Phew! We learned about inheritance in CSS in 2 minutes. It’s basic but I think it’s so important to make sure we understand it. My friend! Let me know if you think they are important either.

Top comments (5)

Collapse
 
ajaymagan profile image
Ajay

like the way you explained with simple examples keep up the good work

Some comments may only be visible to logged-in visitors. Sign in to view all comments.