Skip to content
Get packs

Guide · Open source

How to use normalize.css: install and include it in your page

Updated · written with AI from the project's own documentation and checked against our catalogue data

normalize.css is a stylesheet you include in a web page to smooth out differences between web browsers. Unlike older CSS resets, it keeps useful default browser styles and only fixes inconsistencies and bugs. This guide shows how to add it to a project and what to know before you do.

normalize.cssnecolas/normalize.css · ★ 53.5k · MIT

Quick start

  1. 1Check prerequisites. If you plan to install with npm, make sure Node.js and npm are available on your machine.
  2. 2Install the package. Run npm install --save normalize.css in your project folder.
  3. 3Or use a CDN or download. If you don't use npm, get normalize.css from the CDN listed on the Yarn package page or the download link in the README.
  4. 4Load it first. Include normalize.css before your own stylesheets so your styles can override its defaults.
  5. 5Check browser support. Confirm that the browsers your audience uses appear in the README's support list.

Install normalize.css with npm

The README's npm install command adds normalize.css to your project. npm install is only needed if you use npm; the project also lists CDN and download options.

Installing via npm requires Node.js and npm.

npm install --save normalize.css

Other ways to get normalize.css: CDN or download

If you don't use npm, the README points to two other sources: a CDN, via a Yarn package page, and a direct download of the latest normalize.css file from the project's GitHub Pages site.

Use whichever option fits your project. The README gives links but no CDN snippet, so check those pages for the exact file address.

  • CDN: see the Yarn package page for normalize.css
  • Download: the latest normalize.css file is hosted on the project's GitHub Pages site

Include normalize.css in your page

Load normalize.css before your own stylesheets so your rules can override its defaults. The README does not show the exact link or import markup, so use the path that matches how you installed the file.

Once it is loaded, it applies to the page without any further configuration.

What normalize.css changes

normalize.css preserves useful browser defaults rather than removing them. It normalizes styles for a wide range of elements, corrects bugs and common browser inconsistencies, and makes subtle usability improvements. The file also includes detailed comments explaining what the code does.

Some elements have special cases that the README documents, such as pre, code, kbd and samp (which use a monospace font-family hack), sub and sup (which can change line-box height), and search inputs (where -webkit-appearance: textfield can help).

  • Keeps default browser styles instead of stripping them
  • Normalizes many elements and fixes known browser bugs
  • Documents special cases such as select, checkbox and number inputs in its README

Check browser support before you rely on it

The README lists the browsers it supports: Chrome, Edge, Firefox ESR and later, Internet Explorer 10 and later, Safari 8 and later, and Opera. If your project must support older browsers, check this list first.

Note that the README does not say which versions of Opera are covered.

  • Chrome
  • Edge
  • Firefox ESR+
  • Internet Explorer 10+
  • Safari 8+
  • Opera

What people use it for

  • Giving a marketing site the same base look in Chrome, Firefox and Safari
  • Starting a team project where several developers need a shared browser baseline
  • Keeping default browser styles for headings, lists and form elements while fixing known inconsistencies

Frequently asked questions

Is normalize.css free to use?

normalize.css is released under the MIT licence, according to the project page. The MIT licence is permissive, so check the LICENSE.md file in the repository for the full terms.

How do I install normalize.css?

If you use npm, run npm install --save normalize.css. You can also load it from a CDN or download the file from the project's GitHub Pages link, as described in the README.

Does normalize.css require Node.js?

Only if you install it via npm. Node.js and npm are prerequisites for the npm route. The CDN and download options do not need them.

Which browsers does normalize.css support?

The README lists Chrome, Edge, Firefox ESR and later, Internet Explorer 10 and later, Safari 8 and later, and Opera. It is not a good fit if you must support browsers older than these.

How is normalize.css different from a CSS reset?

Unlike many CSS resets, normalize.css keeps useful default browser styles and only fixes inconsistencies and bugs. Resets remove default styles more completely.

What are alternatives to normalize.css?

The project lists Sanitize.css, Reboot (Bootstrap) and Modern Normalize as comparable projects. Compare them against your browser support and design needs.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

normalize.css suits front-end developers and teams who want consistent base styles across browsers while keeping useful defaults. If you need support for very old browsers, or want a full opinionated design system, pick a different option such as Reboot or a complete framework.

Install options & downloads