CSS can be a little tricky when it comes to restoring properties to their initial value. Let's take the following example:
<p>
<div>In publishing and graphic design</div>, Lorem ipsum
is a placeholder text commonly used to demonstrate the
visual form of a document or a typeface without
relying on meaningful content.
</p>
div {
display: initial;
background-color: red;
}
I would expect that if I wrote display: initial
, then the value would be restored to block
, given that divs are block elements by default. I was confused to see that the div was acting now as inline
. Check out the codepen.
Well, after some research I've discovered that initial
reset the values to their per-property basis. The browser sees the default display of any element as inline
. Only at the next layer, it starts to categorize p
or div
as being block elements.
Following the same idea, if you would apply color:initial
to an a
element, then that element will become black, given that that is the default color for any text.
If we want to reset the value of a property to the default as if the webpage had not included any CSS we would use the revert
value.
div {
display: revert;
/*this will make the div act as block*/
}
Resetting all the CSS properties of an element in CSS
If we want a fast easy reset for all the properties of an element we can use all
combined with revert
:
a {
all: revert;
/*the anchors will look like as if
the webpage had not included any CSS at all*/
}
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.