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.
There are four properties we need to know, I'm going to explain each of those for ease of understanding.
It's simple. The child element will inherit CSS from the parent.
<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.
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:
<h1 style="font-weight: initial">Font Weight Initial Element</h1>
What font-weight do you expect
h1 will be? Is it
default CSS of browser, It's not
initial value. The
initial value of
normal. In this case,
h1 element will be an element that has a normal weight.
The initial value of CSS is something like:
This property makes the element's CSS either inheritance or initial value(if it's not inheritance)
<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>
This value will revert the CSS of element back to
default CSS of the browser.
<h2 style="font-weight: unset">Unset Element</h2> <h2 style="font-weight: revert">Revert Element</h2>
unset CSS will take the initial value of
normal) to behavior.
revert CSS will take the default CSS of the browser
bold) to behavior.
And this is the result:
- Unset Element
- Revert Element
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.