<div class="intro" class="component">

<p><em>

<strong>Note:</strong> The files "base.css" and "base-context.css" are deprecated, use "cssbase.css" and

"cssbase-context.css" instead.

</em></p>

<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>

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

</div><!-- /promo -->

<h2 id="start">Getting Started</h2>

<h3 id="dependencies">Include Dependencies</h3>

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

```

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

```

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

<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>

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

```

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

```

<h2 id="using">Using CSS Base</h2>

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

<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>

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

```

<div>

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

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

</div>

```