YUI 3: The CSS Reset File

CSS Reset

Getting Started

Include Dependencies

To use CSS Reset, include the following source file in your web page:

<!-- Source File --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0b1/build/cssreset/reset-min.css">

Global vs. Contextual

YUI's CSS resources apply rules to HTML elements directly (using type selectors). An alternate version of the resource is available that target elements by context only. This contextual -context.css version selects HTML elements only when they descend from the .yui-reset classname.

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

<!-- Source File --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0b1/build/cssreset/reset-context-min.css">

Using CSS Reset

Using CSS Reset Globally

CSS Reset is easy to use. When CSS Reset is loaded it removes the inconsistent styling of HTML elements provided by browsers. Now, just begin writing the CSS rules your project needs without being burdened by what the browser thinks you need.

Here is an example page showing HTML elements once CSS Reset has been included in the page globally.

Using CSS Reset Contextually

If you're using the contextual version, CSS Reset's rules are only applied to nodes that descend from a node with a class value of .yui-reset. In this example, CSS Reset applies to the h1 in the left column, but does not impact the h1 in the right column:

<div> <div id="left-column" class="yui-reset"><h1>Lorem Ipsum</h1></div> <div id="right-column"><h1>Lorem Ipsum</h1></div> </div>

Here is an example page where only a portion of the page is impacted because it is being used contextually.

Support & Community