Reset + CSS = Recess

September 27th, 2013 Written by

Have you ever tested your site in a different browser and noticed various inconsistencies in the padding, margin or even font size? The reason for this is that all browsers have presentation defaults, but no browsers have the same defaults. In fact, where one browser might use margin for an element such as a list item, another may style it with padding. The biggest discrepancy you might find is font sizing, which can have some pretty adverse effects when elements get pushed down.

The best way to reduce the inconsistencies between browsers is to implement a resetting script atop your CSS file. In doing so, you completely strip every pre-existing style included by each browser. With that, you now have the ability to build from the ground up across every browser.

There’s a second part to this that we shouldn’t take for granted; which is, having complete control over what to do with any given element. Resetting literally gives you a blank canvas to do what you will. Therefore, don’t simply pick strong because the design calls for the bolding of certain elements. Now, you can pick which ever element you choose—whether it’s strong or em or b or h3 or whatever—and style it to however you see fit. If strong means it should stand out, maybe you do this with a color as opposed to the font weight.

Finally, while resetting your CSS is a practical way to avoid the discrepancies between various browsers, it is also a great opportunity to define your arsenal as a developer with the keen of a designer.

Below is the code that I use in my CSS file. As always, have fun with this and experiment away.

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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding:
0; border: 0; outline: 0; font-style: inherit; 
font-size: 100%; font-family: inherit; vertical-align: baseline; }

html { overflow-y: scroll; }

:focus { outline:0; }

a:active { outline:none; }

ul { list-style:none; }