CSS Fundamentals

CSS Normalize

⏱ 6 min read📖 Beginner

CSS Normalize is an alternative to a CSS Reset. Instead of stripping all browser defaults away it carefully fixes the inconsistencies between browsers while keeping the useful defaults intact. A reset gives you a blank slate. Normalize gives you a consistent, corrected one.

You have been using a CSS Reset throughout this course. Every project started with this.

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

That strips everything away. Clean slate. You build from scratch.

CSS Normalize is a different philosophy entirely. Instead of removing all defaults it fixes the inconsistencies between browsers while keeping the useful defaults intact.

Reset vs Normalize — The Real Difference

Imagine two approaches to renovating a house.

Reset is like gutting the house completely. Every wall torn down. Every floor ripped up. You start with bare concrete and build exactly what you want. Total control. Total effort.

Normalize is like a careful renovation. You keep the walls that are in good shape. You fix the ones that are cracked or uneven. You replace only what is broken. Less work. Useful starting point kept.

Neither is wrong. They just suit different situations.

With a reset you get complete control but you have to style everything yourself including things like list markers, heading sizes, and form element appearances.

With normalize you get consistent cross-browser behavior with sensible defaults still in place. A h1 is still big. A ul still has bullet points. A button still looks like a button. They just look the same across every browser.

What Normalize Actually Fixes

Here are some real examples of what normalize corrects.

Some browsers make the html element have a different line height. Normalize fixes that.

Some browsers style the sub and sup elements differently affecting text flow. Normalize fixes that.

Some browsers add different default padding to fieldset elements inside forms. Normalize fixes that.

Some browsers render the hr element with different border styles. Normalize fixes that.

None of these are things you would ever think to reset yourself. But they can cause your page to look subtly different on Safari versus Chrome versus Firefox without you having any idea why.

How to Use Normalize

The easiest way is to link it from a CDN before your own stylesheet.

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
  <link rel="stylesheet" href="style.css">
</head>

It must come before your own CSS so your styles override it where needed.

You can also install it with npm if you are working on a project with a build system.

npm install normalize.css

Which Should You Use

Here is the honest take after building a lot of projects.

For learning and personal projects the simple reset we built is perfect. It is small, you understand every line, and it gives you a clean consistent starting point.

For larger professional projects or when working with a team normalize is worth considering. It handles a lot of edge cases you would never think of and reduces cross-browser surprises on elements like forms, tables, and typographic elements.

For modern projects using a framework like React or a tool like Tailwind CSS neither matters as much because these tools bring their own reset or preflight styles built in.

💡

Never use both a reset and normalize together. They contradict each other. Reset removes defaults that normalize is trying to preserve. Pick one and commit to it. If you are not sure which, just use the simple reset we built. It covers everything you need for building real projects.

Next up — CSS Reset and Organizing CSS. You have seen the reset throughout this course. Now we go deeper into structuring a professional CSS file the way developers actually do it in the real world.

Learn about CSS Reset and Organizing CSS →

Have anything to say about this lesson?

Your feedback helps improve these tutorials. If something was confusing or missing, let us know.