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.
- 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.
- 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: boldofh1->h6elements. -
font-style: italicofemelement. -
color: blueofaelement. - 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...
- 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>
- 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.
Oldest comments (5)
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.