Skip to content
Related Articles

Related Articles

Difference between revert and unset keyword in CSS
  • Last Updated : 27 Feb, 2020

Both of them are keywords in CSS. Both of them act similarly in web development but having differed for some properties for some elements.

Revert: The revert keyword is an inbuilt keyword in CSS which has been used to revert the cascading style to its parent element. If any similar elements hold the same cascading style, but one child holds the revert keyword then the cascading style will be removed and will inherit the cascading from the parent element.

Unset: The unset keyword is an inbuilt keyword in CSS which has been used to unset the cascading style to its parent element. It behaves like the inherit keyword in the first case, and like the initial keyword in the second case.

Below example illustrate the difference between revert and unset keywords:

Note: The coding difference only can be visible in Mozilla Firefox and Apple Safari.



Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>CSS revert keyword</title>
        <style>
  
            /* Color for h1 element */
            h1 {
                color: green;
            }
               
            /* Performing revert for child */
            b {
                font-weight: normal;
            }
        </style>
    </head>
    <body>
            
        <!-- Parent elements -->
        <div class="container">
     
            <!-- Child elements -->
            <h1>GeeksforGeeks</h1>
            <p>A Computer Science Portal for Geeks</p>
            <b style="font-weight: unset;">
                I'm assign in unset
            </b>
            <br>
            <b style="font-weight: revert;">
                I'm assign in revert
            </b>
        </div>
    </body>
</html>

chevron_right


Output:

Differences between revert and unset keyword in CSS:

Revert Unset
This keyword will revert the cascading back to the parents cascading. This keyword will unset the cascading style.
This keyword will revert the cascading back if the element contains h3 and any other cascading style globally it will follow that. This keyword will unset the cascading style, if the element contains h3 and any other cascading style globally it will follow only h3 effect.
My Personal Notes arrow_drop_up
Recommended Articles
Page :