Tuesday, January 12, 2010
Combing YUI and CSS Tools reset.css
The Reset stylesheet is used to reduce browser inconsistencies in things like default line-heights, margins, padding, font-sizes, etc. These styles are intentionally very generic and are based off the "CSS Tools reset.css" and the "Yahoo YUI reset.css" files, which can be found below:
CSS Tools reset.css
http://meyerweb.com/eric/tools/css/reset/
Yahoo YUI reset.css
http://developer.yahoo.com/yui/build/reset/reset.css
Reset.css is a necessary evil in modern web design. With 6-8 common browsers all in use at one time there are inconsistencies in default settings between the browsers. IE6 is still remains the predator that causes the most issues, but each browser has its own quirks, and this CSS basically "resets" the default styles to something more manageable to work with from the start. Using either of the above, or the below CSS is a starting point for any project, the first bit of CSS your HTML should read to get started. From here you can build your site out to be whatever you want, and are able to avoid many cross-browser problems that would otherwise occur. With that said, here is my reset.css, a combination of the two above mentioned stylesheets.
Download a copy without having to copy and paste by clicking below:
my combined version of reset.css
CSS Tools reset.css
http://meyerweb.com/eric/tools/css/reset/
Yahoo YUI reset.css
http://developer.yahoo.com/yui/build/reset/reset.css
Reset.css is a necessary evil in modern web design. With 6-8 common browsers all in use at one time there are inconsistencies in default settings between the browsers. IE6 is still remains the predator that causes the most issues, but each browser has its own quirks, and this CSS basically "resets" the default styles to something more manageable to work with from the start. Using either of the above, or the below CSS is a starting point for any project, the first bit of CSS your HTML should read to get started. From here you can build your site out to be whatever you want, and are able to avoid many cross-browser problems that would otherwise occur. With that said, here is my reset.css, a combination of the two above mentioned stylesheets.
/* Version 1.0 Aerial Perspective combined YUI and CSS Tools reset.css*/
/** 01/11/10**/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; color:#000000; }
table { border-collapse:collapse; border-spacing:0; }
body { line-height:1; }
fieldset, img { border:0; }
address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style:inherit; font-weight:inherit; }
ins { text-decoration:none; }
del { text-decoration:line-through; }
ol, ul { list-style:none; }
li { list-style:none; }
caption, th { text-align:left; }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
abbr, acronym { border:0; font-variant:normal; }
sup { vertical-align:baseline; }
sub { vertical-align:baseline; }
/* remember to define focus styles! */
:focus { outline:0; }
/*because legend doesn't inherit in IE */
legend { color:#000; }
input, button, textarea, select, optgroup, option { font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit; }
/*@purpose To enable resizing for IE @branch For IE6-Win, IE7-Win */
input, button, textarea, select { *font-size:100%; }
Download a copy without having to copy and paste by clicking below:
my combined version of reset.css
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home