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>

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>

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>

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>

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>

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.

Comments

[Ajay]

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