How to reset/remove CSS styles for element ?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                                

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to reset/remove CSS
        styles for element ?
    </title>
      
    <script src=
    </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
        </buuton>
          
        <script>
            $('#gfg').click(function() {
            $('#myid').addClass('geeks');
            });
        </script>
    </center>
</body>
  
</html>                    

chevron_right


Output:

  • Before clicking the button:
  • After clicking the Button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.