How to Reset/Remove/Clear CSS styles for an element

There are some scenarios in web designing when you have to clear CSS styles of an element means all the CSS applied to that element will set to null. All the property applied to that element will be discarded.
This scenario will happen in two scenarios.

1. When you have used inbuilt classes written in CSS framework.
Ex:
In the above button, we have used class “btn btn-primary” of Bootstrap, which makes the button with a blue background. If you have to set all the CSS property to null then you can use this property.

2. When some other developer has written the wrong CSS for the particular element. By using this property, you can discard all the CSS and write your own CSS.

Solution: To set all the property of CSS to null there is a property called “all” in CSS. All: unset property will set the property of CSS to null.
You can read the documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/unset
Example: I have created one example in code pen.

See the Pen reset all style of an element using CSS by Jagdish patil (@jagdishpatil) on CodePen.0

In the above example, there are two buttons i.e. Primary and Secondary. We have assigned all: unset property to the .btn-secondary class. As you can see all the default style applied by the bootstrap framework has gone.

Share this article with your friends if you find it useful. Happy Designing 🙂

Front-end Developer. Passionate about designing, digital marketing, writing, and tea. You can connect with me on social media by links given below.

Leave a Reply

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