Using a Proper CSS Reset vs. Quick Blunt Wildcard Reset

One of the many popular things that pretty much all self-respecting designers nowadays use is a CSS reset section of their initial website stylesheet. In this article I will go over why you want to use a reset section, what it does and the important differences in using a properly crafted reset compared to just making a quick and blunt wildcard reset.

What Is A CSS Reset And Why Do I Need One?

By default all browsers apply some styling to the basic HTML elements. You will notice this if you just create a simple html page with some content on it, marked up by common HTML elements. It will not look very pretty, but all elements get styled in one way or another.

Since the very nature of CSS is to inherit properties from previously loaded stylesheets you will also inherit the basic styles applied by the browser, or the user agent stylesheet to be precise. Occasionally these styles contain default values that you want to keep intact but most often you find yourself overriding some common element all over your normal stylesheet.

A good example of this is margin and padding. Most elements have a pre-defined margin or padding around them and in order to place objects properly in your design, you will need to “reset” these to zero. Doing this all over again in your stylesheet not only takes up more space but creates a mess.

Instead we bring out what is called the CSS Reset, a section in your stylesheet where you “reset” the styles for the default HTML tags to be unstyled, leaving you completely free to work on them yourself.

In essence, a CSS reset is designed to reduce browser inconsistencies and help bridge the gap between the different user agent stylesheets as well as reducing the clutter in your stylesheets.

Note: For HTML5, a CSS Reset section typically includes a part that defines the new tags such as aside, section and article to be displayed as block to make sure older browsers interpret them properly if they do not exist in the user agent stylesheet

Using A Wildcard Reset

It is possible to reset each and every HTML tag that may or may not have a style attached to it with a wildcard CSS statement. While this is quick and easy it may also have undesirable effects.

By removing all default formatting from all HTML tags you force yourself to have to create custom styles for these tags. Remember, you may only think about div, span, ul, li and other common elements, completely forgetting about abbr, pre and cite.

Because of this, I would urge you to just skip thinking about the wildcard reset. It does far more harm than it does good because a lot of the time you just need to reset a handful of styles that you will be customizing and working closer with in your design.

Instead, let’s have a look at a proper CSS reset.

Using A Proper CSS Reset Snippet

Frameworks are really popular on the web today and most CSS framework you will find (such as Blueprint which I like a lot) will include its own reset section. The most commonly used reset snippet is the one originally crafted by Eric Meyer. Let’s have a look at his snippet:

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

As Eric himself advocates, you shouldn’t feel a need to just stick this in your next new project and not touch any of the parameters. The idea of the CSS reset is to tweak it to your needs, including colors and backgrounds.

Personally I usually use a 1.5 line height and therefore adjust the reset style accordingly. If there are elements that you would prefer to keep using the user-agent stylesheet, you can easily remove them from the reset, giving you ultimate flexibility over how you begin your project.

This brings us to the core of the reset philosophy (that sounded deep!), to create a common starting point where your tags behave the same across all browsers, regardless of what the user-agent stylesheet says. By starting off with a reset stylesheet you have the freedom of building a website out of your ideas and in my opinion much faster since you won’t be dealing with bugs due to these default inconsistencies.

Conclusion

Using a CSS reset is a powerful way of quickly achieving a good starting point for your design, allowing you to save time and clutter when coding. Instead of blatantly resetting everything you should find the tags you commonly want to reset and choose default values that work well according to each project individually.

Whether this means crafting your very own reset statement (which I can highly recommend) or using and tweaking one of the ones that have already been made, you have much to gain from using this in your projects.

  • daniels

    I have found this very useful, keep it up