In All Reality

I’ve discovered as of late that there are a lot of practices that haven’t been adopted by the web community that have been around for quite some time (meaning a year or two in web terms).  This is particularly surprising to me in some cases simply because of the sheer usefulness of the practice(s) in question.  A lot of this is simply because of ignorance, and I use that term as it was intended, not with any negative connotation.  So, to help correct that, I thought I’d churn out a quick post on one of the biggest time-savers: the reset stylesheet.

If you’re unfamiliar with what a reset stylesheet is, the concept is very simple.  So simple, in fact, that once you understand it you’ll wonder why we haven’t been using the idea all along.  But to understand why a reset stylesheet is so great, there’s a bit of a back story.

A Brief History of Web Browsers and Why They Suck

The web has been, unbeknownst to most people, a fairly brutal battleground since its inception.  The W3C has been the determining body for what standards browsers and other content devices should adhere to, and they have been soundly ignored from the beginning.  Things really came to a head in the battles between Microsoft and Netscape, with each racing to develop their own proprietary methods that would make developers want to create sites for their browser specifically.

Eventually things calmed down, mostly because of accessibility concerns.  However, the fallout from the earlier battles is apparent in that most browsers still have differing methods of rendering data on the screen.  Things like forms having extra spacing inside them, input fields having their own font families different from the surround elements, lists with varying levels of padding, etc.  This is a huge headache for design and development, to say the least.

Ok, so what is it?

A reset stylesheet is a specialized CSS file, or a collection of CSS definitions, that override all default styling provided by a browser for HTML tags with a visual output.  The practical result of such a sheet is that it removes the ambiguity in display, telling all browsers that this has these types of margins and that has this type of padding.

Exactly what a particular reset stylesheet does is, obviously, based on its contents.  Different stylesheets have been developed with varying degrees of specificity as to what styling they apply.  The stlyesheet that I’ve found to work best for most situations has been one developed by CSS guru, Eric Meyer.  I’ve made a few modifications to his stylesheet and added a few other items:

Download the stylesheet listed below here: Reset Stylesheet (save as…)

1. html, body, div, span, applet, object, iframe,
2. blockquote, pre,
3. a, abbr, acronym, address, big, cite, code,
4. del, dfn, em, font, img, ins, kbd, q, s, samp,
5. small, strike, strong, sub, sup, tt, var,
6. dl, dt, dd, ol, ul, li,
7. fieldset, form, label, legend,
8. table, caption, tbody, tfoot, thead, tr, th, td {
9. margin: 0;
10. padding: 0;
11. border: 0;
12. outline: 0;
13. font-weight: inherit;
14. font-style: inherit;
15. font-size: 100%;
16. font-family: inherit;
17. vertical-align: baseline;
18. }
19. /* remember to define focus styles! */
20. :focus {
21. outline: 0;
22. }
23. body {
24. line-height: 1;
25. color: black;
26. background: white;
27. /* opacity: .99; text-rendering bug in Fx2/Mac --- doesn't validate */
28. }
29. h1, h2, h3, h4, h5, h6 {
30. margin: 10px 10px 10px 5px;
31. padding: 0;
32. }
33. p {
34. margin: 5px;
35. padding: 0;
36. }
37. ol, ul {
38. list-style: none;
39. }
40. /* tables still need 'cellspacing="0"' in the markup */
41. table {
42. border-collapse: separate;
43. border-spacing: 0;
44. }
45. caption, th, td {
46. text-align: left;
47. font-weight: normal;
48. }
49. blockquote:before, blockquote:after,
50. q:before, q:after {
51. content: "";
52. }
53. blockquote, q {
54. quotes: "" "";
55. }
56. /* CLEAFIX */
57. .clearfix:after {
58. content: ".";
59. display: block;
60. height: 0;
61. clear: both;
62. visibility: hidden;
63. }
64. .clearfix {display: inline-block;}
65. /* Hides from IE-mac \*/
66. * html .clearfix {height: 1%;}
67. .clearfix {display: block;}
68. /* End hide from IE-mac */
69. .clearer {
70. clear: both;
71. }

It’s a bit lengthy, but still a very small overall file as far as size is concerned.  It can obviously be condensed and is presented in its current format for readability.  The notable changes that I’ve made to Eric’s base stylesheet have been the addition of the “clearfix” methodology (as described at Webtoolkit) to the bottom, as well as a utility clearing class that I found myself using in nearly every site.

Briefly, what the above code does:

• The <html> <body> <div> <span> <form> <ul> <ol> and other tags are all specifically told to have no margins, no padding, no borders, no outlines, and to inherit their font settings from their parent elements.
• The <body> is given a default color attribute of black and a default background color of white, so you don’t have to set these every time you make a new site.
• Headings and paragraphs are given a specified set of margins and zero padding.
• List items are set to show no bullet or other notation by default (especially useful since most lists tend to end up as navigation or with custom styling).
• For browsers with better support of CSS2 & 3 standards, other things like defining a default focus state for form elements are added as well.
• The clearfix code snippets allow the application of a clearfix class to any element, resulting in that element clearing itself after all floated elements inside it (extremely useful).
• The utility clearer class can be applied to any element, causing it to clear any floats above it.

And that’s basically it.  Here are some important tips and directions:

• Include your reset stylesheet above all other stylesheets.  People tend to forget that HTML is read in a procedural manner, and if your reset stylesheet is placed below all other stylesheets, it’s styling will take precendence over the other CSS definitions. “Thou shalt not have other stylesheets before me.”
• To make your life less of a hassle, always include your reset stylesheet from the very start of your design/development.  Trying to add a reset stylesheet after the fact can sometimes be more of a headache than starting from scratch.
• Recycle!  Save your reset stylesheet code as a snippet or simply as a file located somewhere that you can easily copy and paste into any new projects you begin to work on.

Thanks to all those people who have developed this idea long before I got hold of it, because it has saved me a ton of time and headache.  Enjoy!

Image credit: sumeja