Quick Tip 4 – CSS Resets
When I work on a design when developing in Dreamweaver, almost the first thing I do every time is apply a Reset to my Style Sheet. So what is a CSS Reset?
To get things kicked off let me explain the CSS Reset and why I use it. By default Tags such as h1, li, ul, form, a and many others already have predefined styles on margin and padding which personally I have found can be quite difficult to keep consistent across browsers. To combat this you can take off all predefined styles with a simple slice of code.
While there are many to choose from you may wish to modify them to suit your needs. The CSS Reset I consistently use is below:
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; }
img { border: none; }
However it is always evolving. If you would like to see others have a search in Google as there are plenty around.
Related posts:
- Quick Tip 15 – WP More Tag
- Quick Tip 5 – Compact CSS
- Quick Tip 9 – CSS min height
- Quick Tip 14 – WP E-commerce
- Quick Tip 19 – WP Permalinks
Posted By: Martyn
Hi, I'm Martyn, the Lead Designer for Web Design GM and really hope you find my existing and upcoming articles useful. Please leave comments below and I will try to respond to any questions as soon as possible.
G.- Says:
March 4th, 2010 at 2:27 pm
If your CMS gives users the ability to create tables and adjust cellpadding, i recommend not setting the padding for the TD to 0.
Also setting outline:0; for the A tag kills usability, navigating by tab becomes really difficult same for some mobile devices that don’t have a pointer. If the client does not like how the outline looks, just give it a nice style.
If long outlines in FF is giving you problems check this article by Jonathan Snook http://snook.ca/archives/html_and_css/trimming_long_o.
Still nice start for a reset.css, most i have seen include a “list-style:none;” for ul.
Cheers,,
G.-
Martyn Says:
March 4th, 2010 at 4:32 pm
Thanks for pointing that out, I’ll remove that from my styles in the future. I will be sure to give the snook site a visit.