index.mustache revision aac87d471e46faaa4093fa5291f7d3fc2f6c3c7c
96e79f7ede9fd09c79ac6452ab09e4e48b288e4dMichael Graff <div class="intro">
96e79f7ede9fd09c79ac6452ab09e4e48b288e4dMichael Graff<strong>Note:</strong> The files "reset.css" and "reset-context.css" are deprecated, use "cssreset.css" and
96e79f7ede9fd09c79ac6452ab09e4e48b288e4dMichael Graff <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>
96e79f7ede9fd09c79ac6452ab09e4e48b288e4dMichael Graff <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>
96e79f7ede9fd09c79ac6452ab09e4e48b288e4dMichael Graff <h2 id="start">Getting Started</h2>
96e79f7ede9fd09c79ac6452ab09e4e48b288e4dMichael Graff <h3 id="dependencies">Include Dependencies</h3>
96e79f7ede9fd09c79ac6452ab09e4e48b288e4dMichael Graff <p>To use CSS Reset, include the following source file in your web page:</p>
ae302c18c296f31c02efb613887f206894caa749David Lawrence<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/{{yuiVersion}}/build/cssreset/cssreset-min.css">
ae302c18c296f31c02efb613887f206894caa749David Lawrence <h3 id="context">Global vs. Contextual</h3>
9c3531d72aeaad6c5f01efe6a1c82023e1379e4dDavid Lawrence <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>
a3e0ed2f4a37a13f656855702d1f62ad5ed5fca0Michael Graff <p>Here is how to include the contextual version of CSS Reset:</p>
a3e0ed2f4a37a13f656855702d1f62ad5ed5fca0Michael Graff<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/{{yuiVersion}}/build/cssreset-context/cssreset-context-min.css">
96e79f7ede9fd09c79ac6452ab09e4e48b288e4dMichael Graff <h2 id="using">Using CSS Reset</h2>
96e79f7ede9fd09c79ac6452ab09e4e48b288e4dMichael Graff <h3 id="start-globally">Using CSS Reset Globally</h3>
96e79f7ede9fd09c79ac6452ab09e4e48b288e4dMichael Graff <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>
96e79f7ede9fd09c79ac6452ab09e4e48b288e4dMichael Graff <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>
96e79f7ede9fd09c79ac6452ab09e4e48b288e4dMichael Graff <h3 id="start-contextually">Using CSS Reset Contextually</h3>
96e79f7ede9fd09c79ac6452ab09e4e48b288e4dMichael Graff <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>
96e79f7ede9fd09c79ac6452ab09e4e48b288e4dMichael Graff <div id="left-column" class="yui3-cssreset"><h1>Lorem Ipsum</h1></div>
96e79f7ede9fd09c79ac6452ab09e4e48b288e4dMichael Graff <div id="right-column"><h1>Lorem Ipsum</h1></div>
96e79f7ede9fd09c79ac6452ab09e4e48b288e4dMichael Graff <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>