Difference between “resetting” and “normalizing” in CSS

01 Aug, 2021
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 muchare  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.
reset.html
HTML
<!DOCTYPE html><html lang="en"><head>    <title>        Resetting CSS | GeeksForGeeks    </title>        <!-- Import the CSS Reset -->    <link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css"></head>  <body><!-- HTML Content -->  <h1>GeeksForGeeks</h1>  <h2>Hello There!</h2>  <h3>We Are Performing Reset CSS</h3>  <p>It Resets the Default CSS</p>  </body></html>
Output:
Resetting CSS
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.
normalize.html
HTML
<!DOCTYPE html><html lang="en">  <head>    <title>        Normalizng CSS | GeeksForGeeks    </title>      <!-- Import Normalize.css -->    <link rel="stylesheet" href="https://necolas.github.io/normalize.css/7.0.0/normalize.css"></head>  <body><!-- HTML Content -->    <h1>GeeksForGeeks</h1>    <h2>Hello There!</h2>    <h3>We Are Performing Normalize CSS</h3>    <p>It Normalizes the Default CSS</p>  </body></html>
Output:
Normalizing CSS
Below is the table of differences between Resetting and Normalizing: 
Resetting
Normalizing
CSS-Questions
Picked
CSS
Difference Between
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
Class method vs Static method in Python
Difference between BFS and DFS
Difference between var, let and const keywords in JavaScript
Difference Between Method Overloading and Method Overriding in Java
Differences between JDK, JRE and JVM