What Are CSS Resets And Why Should You Care?

A CSS reset is a bunch of CSS code that reset all (Or most) of the elements of the standard HTML tags to some predetermined value, generally 0.

Why Use A CSS Reset?

The main reason that people will want to (And should) use a CSS reset, is to account for and handle, browser inconsistencies.
For example, browser "A" may make your website look fantastic and exactly how you expected it to look, however, when you take a look at your website in browser "B", you may wonder what the browser creaters have against you, as everything looks completely different and is painful to look at, let alone navigate.

If you manually set all of the values for every tag, then you know ahead of time exactly what everything will look like, so no more worrying about a new browser comming along and screwing up your hard work.

Hard Work? Think Again

You might think think that creating a CSS rest is a lot of hard work, as you'll have to come up with a list of every tag and then think of the right values to use. It wouldn't be a great deal of work really, but it probably wouldn't be very fun, so I've got one here for you ready to use (The original can be found here).

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,
b, u, i, center,
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-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

So there's your css reset. I recommend you save this as a css file on it's own somewhere safe so you can use it over and over again in the future. Tweak any values as you see fit.

Just a pre-warning, the above css reset, resets most tags, including lists, so you don't get the default indentation, you have to specify that yourself. You may think this is more work, but since you'll manually be putting this information in, at least you know know that it will probably look the same in other browsers.

If you enjoyed this article, please consider giving it a +1

Tags: css, css reset

Published: 5/12/2014 7:29:08 PM
By: Stephen Warren