Resetting properties in CSS – Initial vs Revert

šŸ“– Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!

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

šŸ“– Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!


Leave a Reply

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

Home Screencasts Best of Newsletter Search X

Neural Networks for JavaScript developers
Presale - 15$ free coupon

Hi friend! Before you go, just wanted to let you know that in March 2023 I will be launching the TensorFlow.Js by Example course.

This course will include basic concepts of AI and Neural Networks done with TensorFlowJs such as:

  • Working with datasets
  • Visualizing training
  • Deep Neural Networks in JavaScript
  • Reinforcement Learning
  • Convolutional neural networks
  • and much more ...

Also, there will be a lot of examples as:

  • Object detection
  • Natural language processing
  • Face and voice recognition
  • Gaming AI

Join now the waiting list and get a 15$ coupon off the launching price!

X