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.

Getting Started

Include Dependencies

To use CSS Base, include the following source file in your web page:

  1. <!-- Source File -->
  2. <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssbase/base-min.css">
  3.  
<!-- 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:

  1. <!-- Source File -->
  2. <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssbase/base-context-min.css">
  3.  
<!-- 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.

  1. /* base.css, part of YUI's CSS Foundation */
  2. h1 {
  3. 	/*18px via YUI Fonts CSS foundation*/
  4. 	font-size:138.5%;  
  5. }
  6. h2 {
  7. 	/*16px via YUI Fonts CSS foundation*/
  8. 	font-size:123.1%; 
  9. }
  10. h3 {
  11. 	/*14px via YUI Fonts CSS foundation*/
  12. 	font-size:108%;  
  13. }
  14. h1,h2,h3 {
  15. 	/* top & bottom margin based on font size */
  16. 	margin:1em 0;
  17. }
  18. h1,h2,h3,h4,h5,h6,strong {
  19. 	/*bringing boldness back to headers and the strong element*/
  20. 	font-weight:bold; 
  21. }
  22. abbr,acronym {
  23. 	/*indicating to users that more info is available */
  24. 	border-bottom:1px dotted #000;
  25. 	cursor:help;
  26. } 
  27. em {
  28. 	/*bringing italics back to the em element*/
  29. 	font-style:italic;
  30. }
  31. blockquote,ul,ol,dl {
  32. 	/*giving blockquotes and lists room to breath*/
  33. 	margin:1em;
  34. }
  35. ol,ul,dl {
  36. 	/*bringing lists on to the page with breathing room */
  37. 	margin-left:2em;
  38. }
  39. ol li {
  40. 	/*giving OL's LIs generated numbers*/
  41. 	list-style: decimal outside;	
  42. }
  43. ul li {
  44. 	/*giving UL's LIs generated disc markers*/
  45. 	list-style: disc outside;
  46. }
  47. dl dd {
  48. 	/*giving UL's LIs generated numbers*/
  49. 	margin-left:1em;
  50. }
  51. th,td {
  52. 	/*borders and padding to make the table readable*/
  53. 	border:1px solid #000;
  54. 	padding:.5em;
  55. }
  56. th {
  57. 	/*distinguishing table headers from data cells*/
  58. 	font-weight:bold;
  59. 	text-align:center;
  60. }
  61. caption {
  62. 	/*coordinated marking to match cell's padding*/
  63. 	margin-bottom:.5em;
  64. 	/*centered so it doesn't blend in to other content*/
  65. 	text-align:center;
  66. }
  67. p,fieldset,table {
  68. 	/*so things don't run into each other*/
  69. 	margin-bottom:1em;
  70. }
  71.  
/* 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:

  1. <div>
  2. 	<div id="left-column" class="yui-base"><h1>Lorem Ipsum</h1></div>
  3. 	<div id="right-column"><h1>Lorem Ipsum</h1></div>
  4. </div>
  5.  
<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.

YUI's CSS Base on Delicious

Copyright © 2010 Yahoo! Inc. All rights reserved. Copyright | Privacy Policy | Terms of Use | Job Openings