Normalize.css

"Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset."

This component is from Pure Base, which is a direct port of Normalize v1.x from the Normalize.css open source project.

This guide explains the use-cases behind Normalize, how it varies from CSSReset and CSSBase, and how to use it as a foundation for your new projects. For more information, check out this great guide by Nicolas Gallagher.

Getting Started

Include Dependencies

To use Normalize.css, include the following source file in your web page:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssnormalize/cssnormalize-min.css">

Global vs. Contextual

CSS Files such as Normalize.css contain styles that apply globally to all native HTML elements. Sometimes, pulling them into your existing projects can break layout. For these cases, consider using the contextual cssnormalize-context.css. This version selects HTML elements only when they descend from the .yui3-normalized classname.

Here is how to include the contextual version of CSS Base:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssnormalize-context/cssnormalize-context-min.css">

Using Contextual Normalize.css

The following code snippet show how you might apply Normalize.css to one of two columns:

<div>
	<div id="left-column" class="yui3-normalized"><h1>Lorem Ipsum</h1></div>
	<div id="right-column"><h1>Lorem Ipsum</h1></div>
</div>

Normalize vs. Reset and Base

Normalize.css is an alternative to the popular CSSReset + CSSBase combination. Nicolas Gallagher has a great post on how Normalize differs from a standard Reset. Traditional Resets aim to remove all HTML element styles and provide a "blank slate". On the other hand, Normalize.css preserves useful defaults and tries to normalize styles across browsers, instead of removing styles. If a browser does not adhere to the standard styles, Normalize aims to modify them to make styles consistent.

If you currently use CSSBase, consider shifting to using Normalize.css instead. Normalize.css contains a superset of the styles that are in CSSBase. In addition to styles for standard typographic elements, Normalize includes sane defaults for forms, lists and buttons. If you were relying on a contextual CSSBase, you can pull down the contextual Normalize.css on your page instead.