Normalize CSS

Last Updated : 18 Aug 2026

Different browsers may apply slightly different default styles to HTML elements. These differences can affect margins, headings, forms, tables, and other elements when the same webpage is opened in different browsers.

Normalize.css provides a set of CSS rules that makes these default styles more consistent across browsers while preserving useful browser defaults. It can be included in a project before the site's own stylesheet so that custom styles are applied on a more consistent foundation.

In this chapter, you will learn what Normalize.css is, how it differs from a CSS reset, why it is used, and how to add it to a web project.

What is Normalize.css?

Normalize.css is a CSS file that helps browsers render HTML elements more consistently. Instead of removing all browser defaults, it adjusts differences between browsers while retaining many useful default styles.

For example, browsers may use different default margins, font sizes, or display behavior for certain HTML elements. Normalize.css provides rules that reduce these differences, allowing developers to build styles on a more predictable base.

Normalize.css vs CSS Reset

A CSS reset generally removes or overrides the default styles applied by browsers. Normalize.css takes a different approach by preserving useful defaults and making their behavior more consistent.

The main difference can be summarized as follows:

CSS Reset	Normalize.css
It generally removes default browser styles.	It generally preserves useful default styles while making them more consistent.
It provides a blank starting point for custom styling.	It provides a more consistent starting point across browsers.
Developers usually need to define more styles themselves.	Developers can retain some browser-friendly defaults.

Adding Normalize.css to a Webpage

Normalize.css can be added to a webpage by including its stylesheet before the project's custom CSS file. This allows Normalize.css to establish the base styles before the project's own rules are applied.

Example

In the example below, Normalize.css is included before the custom stylesheet so that the custom styles can override the normalized styles when required.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Normalize CSS Example</title>

    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Welcome to the Website</h1>
    <p>This page uses Normalize.css as a base stylesheet.</p>

</body>
</html>

Explanation

In the above example, normalize.css is loaded before style.css. This allows the custom stylesheet to define or modify the appearance of elements after the browser differences have been addressed.

How to Use Normalize.CSS?

1. Download or Link to Normalize.css: You can either download the normalize.css file from the official website (https://necolas.github.io/normalize.css/) and link it in your HTML file or use a CDN link like:

Code:

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

2. Link Normalize.css before Your Custom Styles: Including Normalize.css before your custom CSS in your HTML file is essential. This ensures that it sets the baseline styles you can build upon.

3. Customize as Needed: While Normalize.css provides a solid foundation, you can still customize styles to suit your specific project requirements. This might involve overriding default styles to particular elements or adding additional styles on top of the baseline provided by Normalize.css.

Example:

Code:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Normalized CSS Example</title>

    <!-- Link to Normalize.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />

    <!-- Your custom CSS goes here -->a
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        h1 {
            color: #333;
        }

        p {
            line-height: 1.6;
        }
    </style>
</head>

<body>
    <h1>Hello, World!</h1>
    <p>This is an example of using Normalize.css.</p>
</body>

</html>

Output:

Next TopicRounded Border CSS

← prev next →

We deliver comprehensive tutorials, interview question-answers, MCQs, study materials on leading programming languages and web technologies like Data Science, MEAN/MERN full stack development, Python, Java, C++, C, HTML, React, Angular, PHP and much more to support your learning and career growth.