Possible Duplicate:
Best css reset
What is the best way to implement CSS reset? My question is more in context of implementing layouts which would be cross-browser, cross-platform compliant. E.g. layout should look similar on desktop browsers like ie, firefox and even on iPad and to some extent on iPhone as well.
Please let me know if I should apply CSS reset to acheive this.
What's the best way to implement CSS reset?
Before answering your question, I think it's important to understand what a CSS reset is and is not going to do for you.
The purpose of a CSS reset is to override the default styles that browsers use. That's about it.
There are a bunch of suggested styles that you'll probably find between most popular CSS resets that help to normalize some of the lesser-used elements. Additionally, there are a few necessary styles to make some browsers render HTML5 elements correctly.
Magic. Seriously, they're not a panacea. You'll still have to write a bunch more CSS to get a nice looking webpage. Just because your site uses a CSS reset doesn't mean that your site is better than another that doesn't. Many very attractive sites don't bother with a CSS reset, because they know they're going to override everything as part of the process anyway.
You should use a CSS reset when you're not planning on styling elements much beyond their defaults. It's really helpful for normalizing margins, padding and font-size on block-level text elements such as h#, p, blockquote, ul and ol.
You should not use a CSS reset when you're just blindly linking in someone elses CSS reset without any thought for what it's going to do to your layout. If you don't understand exactly what it's doing with your layout, you shouldn't be using it to begin with.
I usually don't recommend plain CSS resets to people because you often find style like * { margin: 0; padding: 0; } which are not helpful. At best you're going to force yourself to use higher specificity for other selectors down the road, and at worst, you're going to run into all sorts of style inheritance issues.
Instead of using a plain-jane reset, use a reset template, but fill in the styles for the elements you know. Instead of always having:
p
{
margin: 0;
padding: 0;
}
you should set it to what the default paragraph style will be (if you're working with a design from someone else, style guides typically specify most of the styles that belong in a reset stylesheet):
p
{
border-bottom: 1px solid #000;
margin: 0 0 1em;
padding: 0 0 1em;
}
Don't just blindly use a reset from someone else. Instead, pick out the useful styles that will actually be used, and specify useful defaults. There's no point to a CSS reset if you're only going to override everything in your default stylesheet anyway.
I typically call my "reset" stylesheets my core.css because it contains all of my core styles to the layout that i'm trying to produce
You could use normalize.css:
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.
I don't know how well it supports mobile, tablets, etc., however.
This is what's recommended by most usually, it's what I use and I think it's the best out there.
