normalize.css: a modern CSS reset alternative
normalize.css is worth adding to any project where you're hand-rolling CSS and tired of Chrome, Firefox, and Safari disagreeing on margins, font sizing, and form control defaults. Reach for it if you want browsers behaving consistently without losing sensible defaults like list bullets and table borders. Skip it if you're already on a framework that bundles its own reset, like Bootstrap's Reboot, so running both is redundant.
What is normalize.css?
normalize.css is a small CSS file that developers drop into a project to make browsers render standard HTML elements more consistently, instead of zeroing out every default the way a CSS reset does. It targets specific inconsistencies, like line-height on sub/sup, font-size inheritance in monospace elements, and form control styling, fixing each with a documented rule. It ships as an npm package and a downloadable file.
What problems does normalize.css solve?
- ✓Preserves useful browser defaults, like list bullets and table borders, instead of zeroing everything out the way a reset does.
- ✓Normalizes styling across a wide range of HTML elements so headings, forms, and media start from the same baseline.
- ✓Fixes specific, documented browser bugs, like the sub/sup line-height issue and monospace font-size inheritance in pre and code.
- ✓Smooths over inconsistencies in form control styling across browsers.
- ✓Every rule is commented, so you can see why it exists before you override it.
How to add normalize.css to your project
Install normalize.css from npm with `npm install --save normalize.css`, then import or `@import` the file into your CSS bundle, or link it directly in your HTML `<head>`. If you don't want a package manager, get the file via the CDN link the README points to (https://yarnpkg.com/en/package/normalize.css) or download it directly from https://necolas.github.io/normalize.css/latest/normalize.css and drop it into your project. Load it before your own stylesheet so your custom rules win the cascade.
Strengths
- ✓Keeps useful browser defaults, like list markers and table borders, instead of blanking every element the way a reset does.
- ✓Every rule is commented, so you can see exactly what it fixes and why before deciding to override it.
- ✓Ships as a single file, so it drops into any build, npm, CDN, or a direct download, without a build step or config.
- ✓The README documents known unresolved quirks, like search inputs and checkbox styling, explicitly instead of hiding them.
Known issues and browser quirks
- △It's not a full reset. You'll still add your own margin and padding resets for elements like headings and lists, since normalize.css intentionally leaves some defaults in place.
- △Several known browser quirks, like search input styling in Chrome and Safari, select and optgroup font-weight on OS X, and checkbox and radio inconsistencies, are documented as unfixed rather than patched; normalize.css tells you about them instead of solving them.
- △The README doesn't state a release cadence or last-updated date, so you can't tell from the repo page alone how actively the browser-quirk list is being refreshed for newer browsers.
Alternatives to normalize.css
Frequently asked questions
normalize.css lists support for Chrome, Edge, Firefox ESR and newer, Internet Explorer 10 and up, Safari 8 and newer, and Opera, per its README.
A CSS reset strips almost all default browser styling to zero, forcing you to rebuild basics like list bullets and heading sizes yourself. normalize.css instead corrects browser inconsistencies while keeping useful defaults intact, so elements still look reasonable before you write your own CSS.
normalize.css ships with a linked CHANGELOG and an open Gitter channel for support, but the GitHub facts provided here don't include a specific 2024 release date, so check the npm page or GitHub commit history directly for the latest activity.
normalize.css is plain CSS under the MIT license, so you can copy the file into your project and edit or delete any rule directly; many teams do exactly that to drop quirks they don't need.
normalize.css can load alongside a framework like Bootstrap, but Bootstrap already bundles its own Reboot stylesheet built on the same ideas, so running both together is redundant and can create small style conflicts.
normalize.css smooths over form control inconsistencies across browsers but doesn't solve everything; its README specifically flags checkbox and radio inputs, number input cursor styling, and the search input type as cases with known unresolved quirks.
The problem it solves
Every browser ships its own default stylesheet, and those defaults don't agree: Firefox handles box-sizing on checkboxes differently than Chrome, Safari renders monospace font-size inheritance inconsistently in pre and code, and form elements pick up different default padding depending on the OS. Developers used to reach for a full CSS reset to erase all of it, but that also wipes out genuinely useful defaults, like table borders and list bullets, that most sites still want. normalize.css targets the actual inconsistencies documented browser-by-browser instead of nuking every default wholesale.
Best use cases
- •Starting a new project from scratch without a CSS framework, where you want sane baseline styles instead of every browser's own defaults.
- •Building a design system or component library where consistent form control and typography baselines matter across browsers.
- •A static HTML boilerplate that needs cross-browser default styling handled before custom CSS is written.
- •Teams who want to read exactly what a reset changes, since every rule in normalize.css is commented with the reason it exists.
How to use
There's no API or config to learn. normalize.css is one CSS file you load before your own stylesheet, then forget about. You don't call it, initialize it, or import it into JavaScript; it just establishes a consistent baseline that your app's CSS overrides as needed, the same way you'd use any base stylesheet.
Who should try it — and who should skip
Reach for normalize.css if you're writing CSS by hand without a framework and want browsers to agree on defaults before you start customizing; it's a drop-in file with no build step. Skip it if you're already on Bootstrap, Tailwind's preflight, or another framework that bundles its own reset layer, since stacking two normalization layers just adds redundant CSS to debug later.
Related repositories
Want a second opinion on normalize.css?
Ask an AI that can read this page — one click and you get its take on normalize.css.