YUI 3: CSS Base
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 A-grade browsers.
CSS Base may also be useful as a template for your own base file, or a snippets library for styling HTML elements.
More Information
- Examples: CSS Base in action.
- Download: CSS Base as part of the full YUI Library.
- Free Hosting on our fast edge servers with combo-loading.
- License: BSD.
Getting Started
Include Dependencies
To use CSS Base, include the following source file in your web page:
<!-- Source File --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssbase/base-min.css">
<!-- Source File --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssbase/base-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 .yui-base classname.
Here is how to include the contextual version of CSS Base:
<!-- Source File --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssbase/base-context-min.css">
<!-- Source File --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssbase/base-context-min.css">
The YUI CSS Foundation
Note: If you are using the entire YUI CSS foundation, including CSS Reset, CSS Fonts, and CSS Grids resources, we have provided a concatenated and minified aggregate file for you to use use. Using the single "reset-fonts-grids.css" file is better for performance than using each of the foundation files separately.
See the Code
Here are the contents of CSS Base.
/* base.css, part of YUI's CSS Foundation */ h1 { /*18px via YUI Fonts CSS foundation*/ font-size:138.5%; } h2 { /*16px via YUI Fonts CSS foundation*/ font-size:123.1%; } h3 { /*14px via YUI Fonts CSS foundation*/ font-size:108%; } h1,h2,h3 { /* top & bottom margin based on font size */ margin:1em 0; } h1,h2,h3,h4,h5,h6,strong { /*bringing boldness back to headers and the strong element*/ font-weight:bold; } abbr,acronym { /*indicating to users that more info is available */ border-bottom:1px dotted #000; cursor:help; } em { /*bringing italics back to the em element*/ font-style:italic; } blockquote,ul,ol,dl { /*giving blockquotes and lists room to breath*/ margin:1em; } ol,ul,dl { /*bringing lists on to the page with breathing room */ margin-left:2em; } ol li { /*giving OL's LIs generated numbers*/ list-style: decimal outside; } ul li { /*giving UL's LIs generated disc markers*/ list-style: disc outside; } dl dd { /*giving UL's LIs generated numbers*/ margin-left:1em; } th,td { /*borders and padding to make the table readable*/ border:1px solid #000; padding:.5em; } th { /*distinguishing table headers from data cells*/ font-weight:bold; text-align:center; } caption { /*coordinated marking to match cell's padding*/ margin-bottom:.5em; /*centered so it doesn't blend in to other content*/ text-align:center; } p,fieldset,table { /*so things don't run into each other*/ margin-bottom:1em; }
/* base.css, part of YUI's CSS Foundation */ h1 { /*18px via YUI Fonts CSS foundation*/ font-size:138.5%; } h2 { /*16px via YUI Fonts CSS foundation*/ font-size:123.1%; } h3 { /*14px via YUI Fonts CSS foundation*/ font-size:108%; } h1,h2,h3 { /* top & bottom margin based on font size */ margin:1em 0; } h1,h2,h3,h4,h5,h6,strong { /*bringing boldness back to headers and the strong element*/ font-weight:bold; } abbr,acronym { /*indicating to users that more info is available */ border-bottom:1px dotted #000; cursor:help; } em { /*bringing italics back to the em element*/ font-style:italic; } blockquote,ul,ol,dl { /*giving blockquotes and lists room to breath*/ margin:1em; } ol,ul,dl { /*bringing lists on to the page with breathing room */ margin-left:2em; } ol li { /*giving OL's LIs generated numbers*/ list-style: decimal outside; } ul li { /*giving UL's LIs generated disc markers*/ list-style: disc outside; } dl dd { /*giving UL's LIs generated numbers*/ margin-left:1em; } th,td { /*borders and padding to make the table readable*/ border:1px solid #000; padding:.5em; } th { /*distinguishing table headers from data cells*/ font-weight:bold; text-align:center; } caption { /*coordinated marking to match cell's padding*/ margin-bottom:.5em; /*centered so it doesn't blend in to other content*/ text-align:center; } p,fieldset,table { /*so things don't run into each other*/ margin-bottom:1em; }
Using CSS Base
CSS Base is easy to use. Simply including the file provides consistent styling of HTML elements. Here's an example of HTML elements with CSS Base applied.
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 .yui-base. The classname can go as high in the DOM tree as desired, including on the <HTML&ht; element directly.
The following code snippet show how you might apply CSS Base to one of two columns:
<div> <div id="left-column" class="yui-base"><h1>Lorem Ipsum</h1></div> <div id="right-column"><h1>Lorem Ipsum</h1></div> </div>
<div> <div id="left-column" class="yui-base"><h1>Lorem Ipsum</h1></div> <div id="right-column"><h1>Lorem Ipsum</h1></div> </div>
Here is another example showing how to apply CSS Base to a subset of a page.
Support & Community
Forums & Blog
YUI 3 discussion forums are hosted on YUILibrary.com.
In addition, please visit the YUIBlog for updates and articles about the YUI Library written by the library's developers.
Filing Bugs & Feature Requests
The YUI Library's public bug tracking and feature request repositories are located on the YUILibrary.com site. Before filing new feature requests or bug reports, please review our reporting guidelines.

