What is a Normalize CSS File & How Do You Use It?

Working with CSS can be tricky; it can get unwieldy very fast without a starting baseline. Thankfully, there are ways to begin using CSS to style your pages clean and manageable. One example is using a file that creates a set of baseline styles, such as a Normalize CSS file.

This post will teach you about the Normalize CSS file and its use. Furthermore, you will know why some developers choose it over others. You will also learn how to understand how it works and how to implement one. Finally, the post will cover some code examples from the Normalize file.

Let’s get started.

What Does Normalize CSS Do?

All browsers assign default values to specific CSS properties, and each browser sets different ones. To mitigate this inconsistency, a Normalize CSS file can be used to create a baseline for browsers across the board. Each browser has different default style rules; they target other elements and apply different values. As a result, building your styles without a baseline means that your pages will likely display inconsistently across different browsers.

For many developers, this has led to the realization that they need to debug their CSS. Catching this late into development can lead to a code that is unmanageable and difficult to troubleshoot. Normalize aims to fix that problem by targeting the default rules from different browsers. The Normalize file sets default values for these rules to create a baseline.

By including it first in your CSS file declarations, your CSS will start with the same rules for each browser. The Normalize file is only one file used to serve this function, and another similar file is called the CSS Reset. While they both serve the same purpose, they do so differently. Let’s look at the differences between them next.

The following image shows what the browser defaults were for the first-ever webpage.

Source

The following image shows that same page but with a normalized file at the top of your CSS.

Source

CSS Reset vs. Normalize

The Normalize and Reset files are used to create baseline styles for cross-browser consistency when creating webpages. The primary difference is that Normalize aims to identify the different styles in other browsers, starting with styles that developers cannot change. If a style cannot be fixed or updated, that style will be applied to the page for all browsers. Check out the video below to learn more about the difference between the two files.

In the case of the Reset CSS file, default browser styles are handled differently. Reset CSS aims to fix inconsistencies through the stripping of all default styles. This process changes rules with values to zero or the minimum value. So while it strips the defaults, it sets the values to the absolute minimum.

Normalize CSS Example

Now that you have a basic understanding of how the Normalize file works let’s look at an example of some code from it. The following code handles normalizing the line height across browsers to create consistency.

The code above also handles iOS font size changes when the phone orientation changes. This code is a small example of the different style rules targeted in the Normalize CSS file. On the contrary, the Reset file simply changes the values to their minimum.

Getting Started Using a Normalize CSS File

There are many versions of the Normalize file made by developers who prefer different defaults. The best way to understand how to use a Normalize file is to download one of the many versions of it and dive into the code. Through exploring the code and learning how each Normalize file is set up, you can better grasp how each might serve to help your web development.

Looking into the experiences and insights from developers who’ve used them can also lead to a better understanding of your comfort level with the different types of Normalize files.