How to reset/remove CSS styles for element ?

Last Updated : 22 Nov, 2021

The browser uses some pre-defined default values to most of the CSS properties. These default values may vary depending on the browser and also the version of the browser being used. These default values are given in order to ensure uniformity throughout web pages. But in some cases these defaults result in an unexpected action to be performed by the web page, hence removing these defaults is a viable method.
In most cases, the reset can be done using some pre-defined reset methods. There are many other reset methods. But the problem with those reset methods is that, they are used to remove all the styling present in a web page (remove all the browser defaults for all elements and their properties), but if we want to remove the default only or some specific style for one element then the value unset comes in handy.
Problem Statement: Most of the cases the default buttons provided by web browsers are very bland and not stylized. To make it more stylized and to make it fit into the theme of the web page it could be stylized manually using CSS. But manual styles cannot be applied until the default styles are removed. Hence we apply the following code to remove the default styles present on a button.
Example 1: Here you will see how to use unset property by HTML and CSS. This example remove only the default browser style.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to reset/remove CSS
        styles for element ?
    </title>
    
    <style>
        body {
            display: grid;
            min-height: 100vh;
        
        }
        .gfg {
            all: unset;
        }
        .geeks {
            color: green;
            font-size: 3rem;
        }
    </style>
</head>

<body>
    <center>
        <div class="geeks">
            <button class="gfg">
                GeeksforGeeks
            </button>
        </div>
        
        
<p>
            Here the GeeksforGeeks button is
            attached with the unset property
        </p>
<br>
        
        <button class="GFG">
            A Online Computer Secience Portal
        </button>
    </center>
</body>

</html>

Output:

Example 2: Here you will see how to trigger unset property by HTML, CSS an jQuery.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to reset/remove CSS
        styles for element ?
    </title>
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    
    <style>
        .geeks {
            all:unset;
        }
        div {
            color: Green;
            font-size: 44px;
        }
    </style>
</head>
    
<body>
    <center>
        <div id="myid">
            GeeksforGeeks
        </div><br>
        
        <button id="gfg">
            Click me to Unset CSS
        </button>
        
        <script>
            $('#gfg').click(function() {
            $('#myid').addClass('geeks');
            });
        </script>
    </center>
</body>

</html>