Kevin Cupp posted earlier about a way to style everything at once using the universal selector (*). That is not my method of choice though because:
- It’s too general. I don’t think there should be a rule that applied to EVERY element. Especially margin and padding because those are modified all throughout the cascade.
- It’s slower. The browser sifts through the DOM tree and applies those styles to every element.
Here is a better way to “reset” your 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: inherit;
font-style: inherit;
font-size: 100%;
line-height: 1;
font-family: inherit;
text-align: left;
vertical-align: baseline;
}
a img, :link img, :visited img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
content: "";
}
This is Eric Meyer’s rendition of reset.css. Try it out, and let us know how it works.
You should start every web project with this bit of presentation-layer code.
7 Comments
You know, default styles are not there just to piss you off. There is no reason to override all the client side styles. Especially if they changed like my computer and several mobile devices.
I think its a great idea to reset default styles. Because Markup by default shouldn’t have any styles! Its a helpful reminder of that. Its a great start, because in the long run of the development of the site. Also it forces you to define margins and such and don’t just assume their set correctly (there isn’t a correct one all browsers just kind of guess). It causes less inconsistencies through out browsers without you even thinking about it. I use YUI’s reset.
Great idea here!
However, this is my personal experience and would like to share this to all other designers out there.
Do take extra precautions when you are dealing with CMS-es, especially .NET ones where you may not even be able to modify the styling of some modules. Many of them are using tables, and if you reset the padding for tables, it won’t render correctly. This is just one simple example.
Hope this helps!
I always make a smaller reset. Because most of these things I dont use.
To date, no one has shown any evidance that the * selector, slows anything down.
I believe that this myth itself results from a fundamental mis-understanding of how CSS is applied: the browser does not render the page and then apply the rules that it finds; rather for every element on the page, that is checked against the CSS rules that have been defined. Clearly a complex set of CSS rules will require a little more processing, but in this case the * selector is extremely simple, and therefore fast.
In our company we adopted the reset technique for quite some time now and it has proven to do the job properly. Recommended!
I have started looking at CSS frameworks and reset style sheets lately, and I have come to a basic conclusion.
Why reset? Set instead. Simply put, replace your reset style sheet with one that SETs all the basic styles to the defaults you would like to start from instead. You still get a good baseline across browsers by setting all your styles to a standard format. I just don’t see the point of doing something to force me to specifically undo it later. I would much rather start with a style sheet that has a reasonable starting point that overrides the differences between browsers while at the same time making elements appear as I would expect them to everywhere.
So how about we see the death of the reset style sheet and the birth of frameworks with set style sheets. I think I will work on creating my own set.css in the near future.