Difference between “resetting” and “normalizing” in CSS
CSS (Cascading Style Sheets) is a stylesheet language for describing the presentation of an HTML or XML document (including XML dialects such as SVG, MathML or XHTML). CSS specifies how elements should appear on a screen, on paper, in speech, or in other forms of media.
While using CSS the developer may encounter Inconsistencies in browser settings such as default line heights, margins, and heading font sizes, and so on. Some browsers, for example, employ left margins to indent unordered and ordered lists, whereas others use left padding. The top and bottom margins of headings are slightly different, indentation distances are varied, and so on. That’s where Resetting and Normalizing CSS comes in to make that default look more consistent across browsers, and thus spend less time fighting with browser defaults.
Let’s look into these techniques briefly:
Resetting CSS: A CSS reset is a set of styles that you load before your other styles to remove built-in browser styles. Every browser has its own user agent stylesheet, which it employs to make unstyled websites more readable. Most browsers, for example, make links blue and visited links purple by default, add a border and padding to tables, apply various font sizes to H1, H2, H3, and practically everything, and apply a specific amount of padding to almost everything.
Have you ever wondered why Submit buttons appear differently in different browsers?
Obviously, this causes CSS authors a lot of grief because they can’t figure out how to make their websites look the same in every browser. CSS authors can use a CSS Reset to cause every browser’s style to be reset to null, minimizing cross-browser differences as much as feasible. You may then re-style your content using the consistent base you’ve established with your reset, comfortable in the assurance that the browsers’ variances in their default rendering of HTML won’t affect you!
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
For Example, in order to set all elements to have the same font-weight and style, we use:
font-weight: inherit; font-style: inherit; font-family: inherit;
BUT, the Internet Explorer Browser does not support inherit, therefore, the automatic inheriting of values will not occur and the UI will appear to be broken when viewed on IE. Resetting helps overcome issues like these while maintaining the UI.
Example: In this example, we will see how to use reset CSS technique that will be loaded before our other styles to remove built-in browser styles.
Normalizing CSS: Normalizing CSS improves cross-browser consistency in HTML element default styling of the browser’s user agent. It’s an HTML5-friendly replacement for the standard CSS Reset.
The purposes of normalizing are:
- Preserve default useful browsers instead of erasing them.
- Standardize styles for a wide variety of HTML elements.
- Correct bugs and incoherence of common browsers.
- Enhance usability through subtle improvements.
- Use comments and detailed documentation to explain the code.
Now let’s move on to resolve the doubt of what is better and what should be used among these two techniques to smoothen the CSS. Normalizing maintains useful defaults over non-stylizing everything and it won’t clutter your dev tools window. Moreover, Resetting is meant to strip all default browser styling on elements. For e.g. margins, paddings, font sizes of all elements are reset to be the same. You will have to redeclare styling for common typographic elements, on the other hand, Normalizing preserves useful default styles rather than stripping all styles everything. Normalizing CSS is a newer technology than the old Resetting CSS, so it is modular and easy to use. Finally, as now we know the difference between Resetting and Normalizing, we understand that they are not much different as both fight to prevent the breaking of the UI of a webpage. It’s just a matter of approach both these techniques use based on which you can decide which among these you should be using along with your work.
Example: In this example, we will see how to use normalize CSS technique.
Below is the table of differences between Resetting and Normalizing:
|Resets all thehas styles that come with the browser’s user agent.||Provides cross-browser consistency in the default styling of HTML elements which are provided by the browser’s User Agent.|
|Resetting have a big chain of selectors, and they make a lot of unnecessary overrides in the styling.||Not many big chains of CSS Selectors to be seen while normalizing as it utilizes User Agent’s styles.|
|It is hard to debug as it is nearly impossible to identify bugs.||Debugging is easy while normalizing|
|Resetting is Non-Modular (no section breaking in styles)||Normalizing is Modular (styling is divided into sections for ease)|