Difference between reset vs normalize CSS

Last Updated : 08 Apr, 2024

Every browser has its built-in style when displaying a webpage, some are dependent on the operating system, while others are based on the browser itself. As a result, they each have a unique manner of showing particular items.

It might prevent uniformity among browsers from being maintained. Regardless of their operating systems or browsers, you want all of your users to experience the same thing. The problem can be resolved in two ways. One is a normalize and the other is reset. To provide every user with a similar experience, reset and normalize override the browser’s style.

Reset: Reset CSS, as the name implies, will remove all of the browser’s default styles. It restores all HTML components’ styles to a uniform starting point. It is a “slash and burn” method that gets rid of all the default styles and allows you to start again.

Since we rarely utilize the browser’s default font size or margin, this strategy works well with the default style for headers.

Reset typically functions by stripping the element down to default by using a universal selector to set all HTML tags to have the same font size, alignments, and no padding, margin, or border. user’s

*{
      border :0px;
      margin :0px;
      font-size:100%;
      font : inherit:
}

Example: This illustration will demonstrate the reset CSS approach.

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>Difference between reset vs normalize CSS?</h2>
    <h3>We Are Performing Reset CSS</h3>

</body>

</html>

Output:

RESET CSS

Explanation: In the above example, we imported the reset CSS which removed the browser’s default styles. we can differentiate between the browser’s default CSS and CSS after we imported the reset CSS.

Default CSS vs Reset CSS

Normalize: Normalize CSS aims to make building browser styling consistent across browsers. A normalize style is a less extreme way to make the browser default consistent. it provides cross-browser consistency without completely removing the default styling and working with modern CSS standards.

Your CSS will start with the same rules for every browser if you include it first in the declarations of your CSS file. The only file utilized for this purpose is the Normalize file.

Example 2: This illustration will demonstrate the normalized CSS approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        Normalizing 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>Difference between reset vs normalize CSS?</h2>
    <h3>We Are Performing Normalize CSS</h3>
</body>

</html>

Output:

Normalize CSS

Explanation: In the above example, we imported a Normalize CSS which set a standard value for every element which is consistent in all browsers.

we can differentiate between the browser’s default CSS and CSS after we imported the normalize CSS.

Difference Between Rest and Normalize:

Reset	Normalize
resets all of the user’s agent-bundled styles for the browser.	ensures that the HTML elements’ user-agent-provided default styling is consistent across browsers.
Resetting makes a lot of pointless overrides in the styling and has a long chain of selectors.	Since it makes use of the User Agent’s styles, there aren’t many long chains of CSS Selectors to be noticed while normalizing.
As it is practically impossible to find bugs, debugging is challenging.	It’s simple to debug while normalizing
Reset is Not Modular (no section breaking in styles)	Reset Isn’t Modular (no section breaking in styles)
Resets are intended to remove all default browser styles.	The goal of normalizing CSS is to apply built-in browser styling across all browsers uniformly.