CSS Reset vs Normalize: What’s the Difference?

The Problem Both Approaches Solve

Every browser includes a built-in stylesheet. It gives headings their size, paragraphs their spacing, lists their bullets, and links their blue underline. Without it, an HTML document would be a single wall of unbroken text.

The problem is that no two browsers ship the same default stylesheet. Small differences accumulate into a page that looks subtly — or sometimes dramatically — different depending on which browser opens it.

/* Examples of what browsers disagree about by default */

/* Different default margins */
h1 { margin: 0.67em 0; }   /* Chrome, Safari */
h1 { margin: 0.67em 0; }   /* Firefox applies slightly different rounding */

/* Different heading sizes across versions */
h1 { font-size: 2em; }
h1 { font-size: 1.8em; }   /* older Firefox */

/* Form controls look completely different per browser and per OS */
input[type="text"] { /* platform-specific styling */ }
button { /* platform-specific styling */ }

/* Lists: padding, bullets, and marker position vary */
ul { padding-left: 40px; margin: 1em 0; }

A reset or Normalize addresses this by imposing one consistent starting point. The difference is what starting point it imposes.

What a CSS Reset Does

A CSS reset is a stylesheet that removes the browser’s default styling from every element. The most famous is Eric Meyer’s Reset CSS, first published in 2000 and still used today.

The core idea is to zero out the things browsers disagree about — margins, padding, borders, heading sizes, list styles — so that everything starts from a known state. The classic implementation looks like this:

/* A small reset, in the style of Eric Meyer's */

html, body, div, span, h1, h2, h3, h4, h5, h6,
p, a, img, ul, ol, li, form, input, button, table {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

After this applies, a heading looks exactly like a paragraph. A list has no bullets. A link is not blue and not underlined. The document is not broken — it is simply unstyled, and you are expected to build every visual detail yourself.

What a reset removes

What a reset does not touch

A reset is deliberately surgical. It only removes the default styling the specification leaves up to the browser. It does not affect:

• Anything you have already styled explicitly.
• Inheritance — color and font-family still inherit.
• The display value of elements. div is still block, span is still inline.
• Accessibility semantics. A <button> is still keyboard-focusable after a reset.

What Normalize.css Does

Normalize.css was created by Nicolas Gallagher and Jonathan Neal in 2011 as a direct response to the reset approach. Instead of removing browser defaults, it makes them consistent — fixing the differences between browsers while keeping the styling that makes HTML readable.

Its own description puts it clearly: it is a “modern, HTML5-ready alternative to CSS resets.” Where a reset deletes, Normalize corrects.

What Normalize.css changes

What Normalize.css deliberately leaves alone

Normalize only changes what actually differs between browsers. It does not touch:

• Heading font sizes relative to each other — h1 is still larger than h2.
• List bullets and numbering — a list still looks like a list.
• Link colors and underlines — links still look like links.
• Bold and italic on semantic elements — <strong> is still bold.
• Default margins on headings and paragraphs — they remain, just consistently.

The result is a page that looks like a normal HTML document but renders identically in every browser. That is the entire point.

Side-by-Side Comparison

Here is the same HTML rendered three ways: with no reset, with a full reset, and with Normalize. The markup is identical in all three — only the stylesheet differs.

The browser-default panel and the Normalize panel look almost identical. That is the point — Normalize barely changes the appearance of the page in a modern browser. What it changes is what happens in a different browser.

The reset panel looks completely different. Headings, lists, and links have all lost their visual character. The content is still there and still readable, but every visual cue that made the page scannable is gone.

See the Difference: Live Examples

The best way to understand the two approaches is to compare the code that produces them. Below are minimal versions of each — not the full libraries, but enough to show the character of each approach.

Minimal CSS reset

Every rule here removes or neutralizes something. Nothing is added — the reset only takes away.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Minimal Reset</title>
    <style>
        /* === Mini reset === */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        h1, h2, h3, h4, h5, h6 {
            font-size: 1rem;
            font-weight: normal;
        }

        ul, ol {
            list-style: none;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        strong, em {
            font-weight: normal;
            font-style: normal;
        }

        /* A tiny bit of page styling so it is readable */
        body {
            font-family: system-ui, sans-serif;
            padding: 20px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <h1>A heading</h1>
    <p>A paragraph with <a href="#">a link</a> and some <strong>bold text</strong>.</p>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
</body>
</html>

Look carefully at the preview. The heading is the same size as the paragraph. The list has no bullets. The link is not blue. Bold text is not bold. Everything sits flush against everything else. That is what “blank slate” means.

Minimal Normalize

Now the same HTML with a small Normalize-style stylesheet. Every rule here fixes something rather than removing it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Minimal Normalize</title>
    <style>
        /* === Mini normalize === */

        /* Consistent box model and inherited fonts */
        *, *::before, *::after {
            box-sizing: border-box;
        }

        /* Consistent body defaults */
        body {
            margin: 0;
            font-family: system-ui, sans-serif;
            line-height: 1.5;
            padding: 20px;
        }

        /* Consistent heading margins across browsers */
        h1 {
            font-size: 2em;
            margin: 0.67em 0;
        }

        h2 {
            font-size: 1.5em;
            margin: 0.83em 0;
        }

        /* Consistent list indentation */
        ul, ol {
            padding-left: 2em;
        }

        /* Form controls inherit typography — a real bug fix */
        button, input, select, textarea {
            font-family: inherit;
            font-size: 100%;
            line-height: 1.15;
            margin: 0;
        }

        /* Images behave predictably */
        img {
            border-style: none;
            max-width: 100%;
        }

        /* Prevent iOS text inflation */
        html {
            -webkit-text-size-adjust: 100%;
        }
    </style>
</head>
<body>
    <h1>A heading</h1>
    <p>A paragraph with <a href="#">a link</a> and some <strong>bold text</strong>.</p>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
    <button type="button">A button</button>
</body>
</html>

This preview looks very much like plain HTML — because that is exactly the point. The heading is large and bold, the list has bullets, the link is blue, and bold text is bold. What has changed is that all of those are now consistent across browsers, and form controls inherit the page typography instead of falling back to the platform default.

What Each One Actually Touches

The clearest way to see the philosophical difference is to list what each approach does to the same set of properties.

Read the two columns as philosophies. The reset column says removed almost every time. The Normalize column says kept, normalized, or fixed. One deletes, the other corrects.

The line count difference

Modern Alternatives

Both approaches date from a time when browsers disagreed far more than they do today. In 2025, the situation has changed, and several options have grown up around them.

A modern base stylesheet in 15 lines

Many projects today skip both libraries and write their own small base layer. It is not a reset and not Normalize — it is just the handful of rules that modern browsers actually need.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modern Base</title>
    <style>
        /* === A modern base layer === */

        *, *::before, *::after {
            box-sizing: border-box;
        }

        * {
            margin: 0;
        }

        body {
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            padding: 20px;
            font-family: system-ui, sans-serif;
        }

        img, picture, video, canvas, svg {
            display: block;
            max-width: 100%;
        }

        input, button, textarea, select {
            font: inherit;
        }

        p, h1, h2, h3, h4, h5, h6 {
            overflow-wrap: break-word;
        }
    </style>
</head>
<body>
    <h1>A modern base</h1>
    <p>This is a small, hand-written base layer. It is neither a reset nor Normalize — just the
    rules modern browsers actually need.</p>
    <ul>
        <li>Box-sizing on every element</li>
        <li>Margins removed by default</li>
        <li>Form controls inherit typography</li>
        <li>Images never overflow their container</li>
    </ul>
    <button type="button">A button</button>
</body>
</html>

Notice how much is not here. No heading size resets, no list style removal, no link color overrides. The modern base keeps almost everything and only touches the things that genuinely need a consistent answer.

How to Choose

There is no single right answer, but the decision is simpler than it looks. Ask what kind of project you are building and how much control you want over the visual language.

Choose a reset when…

• You are building a fully custom design system where every element is styled by you.
• Your designs use extremely tight spacing and the browser’s default margins get in the way.
• You are working with a designer who has specified every typographic value explicitly.
• You want the same blank starting point regardless of what the browser provides.

Choose Normalize when…

• You are building a content site, blog, documentation site, or marketing page.
• You want sensible defaults that you only override where the design requires it.
• You are working with a legacy codebase that already assumes browser defaults exist.
• You want a stylesheet that fixes browser bugs you would otherwise have to discover yourself.

Choose a modern base when…

• You are starting a new project and only need to support current browsers.
• You do not want a third-party dependency in your CSS pipeline.
• You know exactly which handful of defaults you want to normalize and which to leave alone.
• Your build already handles minification and you want to keep the source small.

Common Mistakes

These are the patterns that turn a sensible choice of reset or Normalize into a bug that takes hours to find.

1. Using both a reset and Normalize

2. Loading a reset after your own styles

3. Applying a reset and then not restyling

4. Removing focus outlines

5. Using the universal selector to reset everything

6. Editing a library file directly

7. Forgetting to rebuild the stylesheet after adding a reset

8. Expecting a reset to fix layout bugs

Best Practices

Whichever approach you choose, these habits keep it working well as a project grows.

Key Takeaways

• A CSS reset removes browser defaults; Normalize fixes them.
• Every browser ships a user agent stylesheet, and they differ in small ways.
• A reset gives you a blank slate, but you must restyle everything yourself.
• Normalize keeps readable defaults and only corrects what actually differs between browsers.
• Using both a reset and Normalize defeats the purpose of both.
• The baseline must load before any of your own CSS.
• * { box-sizing: border-box; } belongs in almost every project, either way.
• Never remove focus outlines — replace them with a visible custom style.
• A reset is not a layout fix — it does not touch display, position, or flex.
• Modern browsers are far more consistent, so a small hand-written base is often enough.
• modern-normalize, sanitize.css, and Bootstrap Reboot are the current alternatives.
• Never edit a library file directly — override it in your own layer instead.

What to Learn Next

Now that the baseline is settled, the next step is deciding how to organize what sits on top of it. Start with CSS File Structure and How to Organize CSS Code.

From there, explore CSS Custom Properties for the tokens that make up your design system, and CSS Naming Conventions for the classes those tokens feed into. When you are ready to build layouts, read CSS Flexbox Guide and CSS Grid Guide, then move on to Responsive Web Design.

If you are still connecting the pieces, read What Is CSS?, How to Add CSS to HTML, and CSS Syntax Explained for the surrounding context.

Practice Challenge

The fastest way to understand the difference between a reset and Normalize is to build the same page three times. This exercise takes about twenty minutes.

1. Create default.html, reset.html, and normalize.html in the same folder.
2. In each file, write the same HTML: an h1, an h2, a paragraph with a link and some <strong> text, an unordered list with three items, and a <button>.
3. Open default.html. This is the browser’s user agent stylesheet at work — note the heading sizes, the list bullets, the link color, and the button styling.
4. In reset.html, add a <style> block with a small reset: * { margin: 0; padding: 0; box-sizing: border-box; }, then reset heading sizes to 1rem and font-weight: normal, remove list-style from lists, and reset links to color: inherit; text-decoration: none;.
5. Refresh reset.html. Note how every visual cue has disappeared. The page is now a wall of plain text.
6. In normalize.html, add a small Normalize-style block: box-sizing: border-box, body { margin: 0; }, button, input { font: inherit; }, img { max-width: 100%; }, and consistent heading margins.
7. Refresh normalize.html. Note that it still looks like HTML, but with consistent form control typography.
8. Now add a button and an input to each of the three pages, side by side, and compare them. The default version will use the platform’s button font; the reset version will look bare; the normalize version will inherit the page font.
9. In reset.html, add back a few visual signals: h1 { font-size: 2rem; }, ul { list-style: disc; padding-left: 1.5em; }, and a { color: #0891b2; text-decoration: underline; }. Refresh. Note how much work it is to restore what the reset removed.
10. Finally, in normalize.html, open DevTools and inspect the heading. Confirm that the default heading size is still applied and that only the differences between browsers have been corrected.

If you complete those steps, you have seen the user agent stylesheet at work, watched a reset strip a page down to plain text, watched Normalize keep the page readable while making it consistent, and experienced firsthand how much restyling a reset requires. That last part is the answer to the whole question: a reset is the right tool when you were going to define every detail yourself anyway, and the wrong tool when you were not.