šŸ“• LangChain for JavaScript developers is now out!
Build 5 Next.js apps with ChatGPT integrated features using LangChain.

Resetting properties in CSS – Initial vs Revert

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.


Leave a Reply

Your email address will not be published. Required fields are marked *