53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney <div class="intro" class="component">
b1c39f37bdd5f51ec6a90991eb0c586867a02da5Matt Sweeney <p><em>
b1c39f37bdd5f51ec6a90991eb0c586867a02da5Matt Sweeney<strong>Note:</strong> The files "base.css" and "base-context.css" are deprecated, use "cssbase.css" and
b1c39f37bdd5f51ec6a90991eb0c586867a02da5Matt Sweeney"cssbase-context.css" instead.
b1c39f37bdd5f51ec6a90991eb0c586867a02da5Matt Sweeney </em></p>
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney <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>
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney <p>CSS Base may also be useful as a template for your own base file, or a snippets library for styling HTML elements.</p>
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney </div><!-- /promo -->
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney <h2 id="start">Getting Started</h2>
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney <h3 id="dependencies">Include Dependencies</h3>
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney <p>To use CSS Base, include the following source file in your web page:</p>
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney```
cb742409a5b74a0dcae38d50f3565e9bbadb93b8Matt Sweeney<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/{{yuiVersion}}/build/cssbase/cssbase-min.css">
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney```
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney <h3 id="context">Global vs. Contextual</h3>
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt 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-cssbase</code> classname.</p>
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney <p>Here is how to include the contextual version of CSS Base:</p>
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney```
0b5b717e67174f60b93146fe0f74b1ebe6f0ca7cMatt Sweeney<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/{{yuiVersion}}/build/cssbase-context/cssbase-context-min.css">
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney```
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney <h2 id="using">Using CSS Base</h2>
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney <h3 id="start-in-context">Using CSS Base In Specific Contexts</h3>
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney
308519cb5905de3c04732c5f356c17b43c004039Matt Sweeney <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>
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney <p>The following code snippet show how you might apply CSS Base to one of two columns:</p>
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney```
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney<div>
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney <div id="left-column" class="yui3-cssbase"><h1>Lorem Ipsum</h1></div>
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney <div id="right-column"><h1>Lorem Ipsum</h1></div>
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney</div>
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney```
53c29b5c2e45418277bf03d6fc5dd81882abcff8Matt Sweeney