Jump to Table of Contents

CSS Base

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>