b0e8ba0bb1024f36f17e1c8c55f531698df8bec7Matt Sweeney <div class="intro">
aac87d471e46faaa4093fa5291f7d3fc2f6c3c7cMatt Sweeney<strong>Note:</strong> The files "reset.css" and "reset-context.css" are deprecated, use "cssreset.css" and
b0e8ba0bb1024f36f17e1c8c55f531698df8bec7Matt Sweeney <p>The foundational CSS Reset removes the inconsistent styling of HTML elements provided by browsers. This creates a dependably flat foundation to built upon. With CSS Reset loaded, write explicit CSS your project needs.</p>
3518f99733b745a55586913828114919790a1ffbMatt Sweeney <p><strong>Note:</strong> <a href="../cssbase/">CSS Base</a> can complement <a href="../cssreset/">CSS Reset</a> by applying a style foundation for common HTML elements that is consistent for our <a href="http://developer.yahoo.com/yui/articles/gbs">browser baseline</a>.</p>
b0e8ba0bb1024f36f17e1c8c55f531698df8bec7Matt Sweeney <h2 id="start">Getting Started</h2>
b0e8ba0bb1024f36f17e1c8c55f531698df8bec7Matt Sweeney <h3 id="dependencies">Include Dependencies</h3>
b0e8ba0bb1024f36f17e1c8c55f531698df8bec7Matt Sweeney <p>To use CSS Reset, include the following source file in your web page:</p>
fb2e66e5dffe0282a53f9617c239fe8dab9f8412Matt Sweeney<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/{{yuiVersion}}/build/cssreset/cssreset-min.css">
b0e8ba0bb1024f36f17e1c8c55f531698df8bec7Matt Sweeney <h3 id="context">Global vs. Contextual</h3>
b0e8ba0bb1024f36f17e1c8c55f531698df8bec7Matt Sweeney <p>YUI's CSS resources apply rules to HTML elements directly (using <a href="http://www.w3.org/TR/CSS21/selector.html#type-selectors">type selectors</a>). An alternate version of the resource is available that target elements by context only. This contextual <code>-context.css</code> version selects HTML elements only when they descend from the <code>.yui3-cssreset</code> classname.</p>
b0e8ba0bb1024f36f17e1c8c55f531698df8bec7Matt Sweeney <p>Here is how to include the contextual version of CSS Reset:</p>
fb2e66e5dffe0282a53f9617c239fe8dab9f8412Matt Sweeney<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/{{yuiVersion}}/build/cssreset-context/cssreset-context-min.css">
b0e8ba0bb1024f36f17e1c8c55f531698df8bec7Matt Sweeney <h2 id="using">Using CSS Reset</h2>
b0e8ba0bb1024f36f17e1c8c55f531698df8bec7Matt Sweeney <h3 id="start-globally">Using CSS Reset Globally</h3>
b0e8ba0bb1024f36f17e1c8c55f531698df8bec7Matt Sweeney <p>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 <em>thinks</em> you need.</p>
b0e8ba0bb1024f36f17e1c8c55f531698df8bec7Matt Sweeney <p>Here is an <a href="cssreset-basic.html">example page showing HTML elements</a> once CSS Reset has been included in the page globally.</p>
b0e8ba0bb1024f36f17e1c8c55f531698df8bec7Matt Sweeney <h3 id="start-contextually">Using CSS Reset Contextually</h3>
b0e8ba0bb1024f36f17e1c8c55f531698df8bec7Matt Sweeney <p>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 <code>.yui3-cssreset</code>. In this example, CSS Reset applies to the <code>h1</code> in the left column, but does not impact the <code>h1</code> in the right column:</p>
b0e8ba0bb1024f36f17e1c8c55f531698df8bec7Matt Sweeney <div id="left-column" class="yui3-cssreset"><h1>Lorem Ipsum</h1></div>
b0e8ba0bb1024f36f17e1c8c55f531698df8bec7Matt Sweeney <div id="right-column"><h1>Lorem Ipsum</h1></div>
b0e8ba0bb1024f36f17e1c8c55f531698df8bec7Matt Sweeney <p>Here is an <a href="cssreset-context.html">example page where only a portion of the page is impacted</a> because it is being used contextually.</p>