Resetting properties in CSS – Initial vs Revert

DanielOctober 13, 2021

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*/
}