At least once, Front-end developers tackled default style in their projects and professional life. And also, swearing at CSS creator or Google Chrome and so on as well. So how we can get rid of this nightmare? Is any easy peasy lemon squeezy way to solve the problem?
Yes, this Is the short answer to this question. But how? In this short article or whatever you named, I will introduce how you can reset all the user agent and default styles.
Where the default style comes from?
Before understanding the solution, it's important to understand where we get our basic styles in our browser.
All the properties in CSS come with initial value to load the default style of each property. And this is NOT related to HTML.
The User-Agent Browser Styles
After applying the initial styles of all the CSS properties, the browser finally loads its default styles which are known as user-agent. These styles have nothing to do with the base initial values of the CSS properties.
Also, you can see them in the Chrome developer tools.
For Example:
HTML elements do not have initial style values! The basic styles of an HTML element, such as the <h1> tag, for example, comes from the browser user agent stylesheet and not from the initial value of the properties of CSS.
And now lets to talk about the solution
To reset all the user-agent styles, you can easily use all:unset property for each element in the CSS.
For example: h1{all:unset}
There are different values for all like initial and inherit which you can read about them more in the developer.mozilla.org.
Browser Support
-
inherit- works in all browsers, including Internet Explorer 11 -
initial&unset&revert- work in all browsers except for Internet Explorer 11
Final Words
That's all.
I hope you've enjoyed this article and learned from my experience.
If you like this post, I would appreciate applause and sharing :-)
Top comments (2)
That's a nice tip. I've always just copied this reset.css (template)[meyerweb.com/eric/tools/css/reset/] into my projects and make sure it's the first css file to be loaded to ensure a clean start before my other css files are applied.
This is also another good way to remove default styles. Thank you for sharing.