Developer Network Home - Help

YUI 2: Reset CSS

YUI 2: Reset CSS

The foundational YUI Reset CSS file removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions.

Note: YUI Base CSS (introduced in version 2.3.0) can complement Reset by applying a style foundation for common HTML elements that is consistent across A-grade browsers.

Video: The YUI CSS Foundation

In this 42-minute tech talk from October 2007, YUI senior engineer and CSS component author Nate Koechley provides a holistic introduction to this and all of the YUI CSS components. [iPod/iPhone compatible download also available.]

Getting Started

To use Reset, include the following source file in your web page with the link element:

  1. <!-- Source File -->
  2. <link rel="stylesheet" type="text/css" href="https://yui-s.yahooapis.com/2.9.0/build/reset/reset-min.css">
  3.  
<!-- Source File -->
<link rel="stylesheet" type="text/css" href="https://yui-s.yahooapis.com/2.9.0/build/reset/reset-min.css">
 

The YUI CSS Foundation

Note: If you are using the entire YUI CSS foundation, including the Reset, Fonts, and Grids packages, we have provided a concatenated and minified aggregate file for you to use use. Including the "reset-fonts-grids.css" file will give you more efficient pageload performance as compared to including each of the foundation files separately.

  1. <!-- Source File -->
  2. <link rel="stylesheet" type="text/css" href="https://yui-s.yahooapis.com/2.9.0/build/reset-fonts-grids/reset-fonts-grids.css">
  3.  
<!-- Source File -->
<link rel="stylesheet" type="text/css" href="https://yui-s.yahooapis.com/2.9.0/build/reset-fonts-grids/reset-fonts-grids.css">
 

YUI dependency configurator.

YUI Dependency Configurator:

Instead of copying and pasting the filepaths above, try letting the YUI dependency Configurator determine the optimal file list for your desired components; the Configurator uses YUI Loader to write out the full HTML for including the precise files you need for your implementation.

Note: If you wish to include this component via the YUI Loader, its module name is reset. (Click here for the full list of module names for YUI Loader.)

Where these files come from: The files included using the text above will be served from Yahoo! servers; see "Serving YUI Files from Yahoo!" for important information about this service. JavaScript files are minified, meaning that comments and white space have been removed to make them more efficient to download. To use the full, commented versions or the -debug versions of YUI JavaScript files, please download the library distribution and host the files on your own server.

Order matters: As is the case generally with JavaScript and CSS, order matters; these files should be included in the order specified above. If you include files in the wrong order, errors may result.

Building Up Explicitly

With reset.css in place, begin developing as normal. Because various margins and paddings have been removed, styles should behave consistently from the start across the various A-Grade browsers. Remember to be explicit about your desired presentation, for example adding font-style:bold to strong if you wish to follow the common browser convention that emboldens content within that tag.

See the Code

Here is what's in Reset. As you can see in the code below, or in this example showing HTML elements after Reset has been applied, it standardizes cross-browser rendering on common elements, neutralizing browsers' built-in stylesheets.

  1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
  2. margin:0;
  3. padding:0;
  4. }
  5. table {
  6. border-collapse:collapse;
  7. border-spacing:0;
  8. }
  9. fieldset,img {
  10. border:0;
  11. }
  12. address,caption,cite,code,dfn,em,strong,th,var {
  13. font-style:normal;
  14. font-weight:normal;
  15. }
  16. ol,ul {
  17. list-style:none;
  18. }
  19. caption,th {
  20. text-align:left;
  21. }
  22. h1,h2,h3,h4,h5,h6 {
  23. font-size:100%;
  24. font-weight:normal;
  25. }
  26. q:before,q:after {
  27. content:'';
  28. }
  29. abbr,acronym { border:0;
  30. }
  31.  
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
 

Support & Community

The YUI Library and related topics are discussed on the on the YUILibrary.com forums.

Also be sure to check out 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.

CSS Reset/Base/Fonts/Grids Cheat Sheet:

Cheat Sheet for CSS Reset, Fonts and Grids.

Download full set of cheat sheets.

Reset CSS Examples:

More Reading about CSS Reset:

YUI Reset on del.icio.us:

bookmark on del.icio.us

be the first to bookmark this page!

Copyright © 2017 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings