Note: The files "base.css" and "base-context.css" are deprecated, use "cssbase.css" and "cssbase-context.css" instead.
CSS Base is an optional CSS file that complements YUI's core CSS foundation (CSS Reset and CSS Fonts). CSS Base applies a style foundation for HTML elements that is consistent for baseline browsers.
CSS Base may also be useful as a template for your own base file, or a snippets library for styling HTML elements.
Getting Started
Include Dependencies
To use CSS Base, include the following source file in your web page:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssbase/cssbase-min.css">
Global vs. Contextual
YUI's CSS resources apply rules to HTML elements directly (using type selectors). An alternate version of the resource is available that target elements by context only. This contextual -context.css version selects HTML elements only when they descend from the .yui3-cssbase classname.
Here is how to include the contextual version of CSS Base:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssbase-context/cssbase-context-min.css">
Using CSS Base
Using CSS Base In Specific Contexts
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 .yui3-cssbase. The classname can go as high in the DOM tree as desired, including on the HTML element directly.
The following code snippet show how you might apply CSS Base to one of two columns:
<div> <div id="left-column" class="yui3-cssbase"><h1>Lorem Ipsum</h1></div> <div id="right-column"><h1>Lorem Ipsum</h1></div> </div>