Reset Styles
At AEA Boston, I advocated using a “reset” or “baseline” set of styles, but not one based on the universal selector. Instead, I said the styles should list all the actual elements to be reset and exactly how they should be reset. During the Q&A afterward, an audience member asked me if I would create such a style sheet to share with the world, and I said that I would.
Then, during the break, someone else (sorry I’ve forgotten who!) reminded me that the Yahoo! UI group already did it with reset.css so I don’t have to. Awesome!
…except that I don’t think it goes far enough in some areas, and a little too far in others. So here’s my version of reset.css, based off of the YUI styles.
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,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
line-height: 1;
font-family: inherit;
text-align: left;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol,ul {
list-style: none;
}
q:before,q:after,
blockquote:before,blockquote:after {
content: "";
}
I omitted elements like hr and the various frame-related elements, as well as form elements like input and select, because of their general weirdness, though I may change my mind about those at a later date. I intentionally left out dir and menu because of their deprecated status.
I’m absolutely open to questions, comments, and suggestions, so feel free to use the comments for that purpose.
(Side note: if anyone’s disturbed by the unitless value for line-height, please read my post “Unitless line-heights“.)
Addendum: There have been some good suggestions in the comments, so they’re definitely worth reading. See also the followup post, which incorporates some of those suggestions.
