6105N/A <div class="intro" class="component">

6105N/A

6105N/A <p>CSS Base is an optional CSS file that complements YUI's core CSS foundation (<a href="../cssreset/">CSS Reset</a> and <a href="../cssfonts/">CSS Fonts</a>). CSS Base applies a style foundation for HTML elements that is consistent for <a href="http://developer.yahoo.com/yui/articles/gbs">baseline browsers</a>.</p>

6105N/A <p>CSS Base may also be useful as a template for your own base file, or a snippets library for styling HTML elements.</p>

6105N/A

6105N/A </div><!-- /promo -->

6105N/A

6105N/A <h2 id="start">Getting Started</h2>

6105N/A

6105N/A <h3 id="dependencies">Include Dependencies</h3>

6105N/A

6105N/A <p>To use CSS Base, include the following source file in your web page:</p>

6105N/A

6105N/A```

6105N/A<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/{{yuiVersion}}/build/cssbase/base-min.css">

6105N/A```

6105N/A <h3 id="context">Global vs. Contextual</h3>

6105N/A

6105N/A <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-cssbase</code> classname.</p>

6105N/A

6105N/A <p>Here is how to include the contextual version of CSS Base:</p>

6105N/A

6105N/A```

6105N/A<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/{{yuiVersion}}/build/cssbase/base-context-min.css">

6105N/A```

6105N/A <h2 id="using">Using CSS Base</h2>

6105N/A

6105N/A <h3 id="start-in-context">Using CSS Base In Specific Contexts</h3>

6105N/A

6105N/A <p>If you're using the contextual version, CSS Base's rules are only applied to elements that descend from a node with a class value of <code>.yui3-cssbase</code>. The classname can go as high in the DOM tree as desired, including on the <code>HTML</code> element directly.</p>

6105N/A

6105N/A <p>The following code snippet show how you might apply CSS Base to one of two columns:</p>

6105N/A

6105N/A```

6105N/A<div>

6105N/A <div id="left-column" class="yui3-cssbase"><h1>Lorem Ipsum</h1></div>

6105N/A <div id="right-column"><h1>Lorem Ipsum</h1></div>

6105N/A</div>

6105N/A```

6105N/A

6105N/A