CSS Tip #1: Resetting Your Styles with CSS Reset

Nov 18 2008 by Jacob Gube | 73 Comments

This is the first part of a series of articles that will discuss a particular CSS best practice or tip. I’ll be covering a mixture of topics that deals with CSS best practices, performance optimization, and tips and tricks to improve your workflow.

Today we’ll be covering the topic of resetting your styles.

CSS Tip #1: Resetting Your Styles with CSS Reset

Resetting your styles, commonly referred to as CSS Reset or Reset CSS is the process of resetting (or more accurately – setting) the styles of all elements to a baseline value so that you avoid cross-browser differences due to their built-in default style settings. By resetting your styles, you avoid defaulting to the browser’s built-in styles, which differs from browser to browser.

CSS Reset avoids browser inconsistencies

For example, say you use an anchor tag <a> in your HTML document. Usually, browsers like Internet Explorer and Firefox will render it as blue and underlined.

But five years from now, someone decides to release a new browser (let’s call it UltraBrowser) and they decide that they don’t like blue, underlined links – so instead they set the default style of <a> tags to red and boldfaced. If you always set a baseline value for your <a> elements, then you’re guaranteed that it will always be the same, regardless of what UltraBrowser thinks <a> elements should look like.

A simple example

Example 1: How paragraph tags are rendered by default.

In Example 1, I’ve placed three unstyled paragraphs <p> inside a container <div> (I gave the container div a blue background and orange border to highlight the difference).

How Firefox and Internet Explorer renders paragraph tags

By default, in Firefox, you’ll see that there’s a space in between the top of the first paragraph and the top of the container div, and a space between the bottom of the last paragraph and the bottom of the container div.

By default, these spaces don’t exist in Internet Explorer.

So which browser is right, Firefox or IE? It doesn’t matter. What does matter is that the spacing in between your paragraphs and other elements will look dissimilar if you don’t set a style for a paragraph’s margin and padding.

Of course that’s a rather simplified example. In practice, CSS Reset is important in removing inconsistent margins, paddings, line-heights, and other attributes that can cause your web pages to look differently across various browsers.

So that’s the basic theory of resetting your styles which just means you set your style rules for all elements to avoid having the browser do it for you. Further down, we’ll talk about it in practice, but first a little bit of history on how CSS Reset became a standard practice for modern web developers.

A reset to where it all started…

The concept of CSS Reset was first discussed formally way back when dinosaurs still roamed the internet (2004 to be exact) by Andrew Krespanis. In his article, he suggests using the universal selector (*) at the beginning of your CSS file to select all elements and give them 0 values for margin and padding, like so:

* {
  margin: 0;
  padding: 0;
}

The universal selector acts like a wildcard search, similar to regular expression matching in programming. Since in this case, the * isn’t preceded by another selector, all elements (in theory – some browsers don’t fully support it) is a match and therefore all margins and paddings of all elements are removed (so we avoid the spacing differences shown in Example 1).

Applying the universal selector margin/padding reset to our earlier example, we now remove all inconsistent spacing between all browsers (in other words, we don’t make the browsers think for us, we show them who’s boss).

Example 2: Applying the universal selector margin/padding reset

But now we don’t have any spacing in between paragraphs, so somewhere below our universal selector reset, we’ll declare the way we want our paragraphs to look like. You can do it a number of ways – you can put margins (or padding) at the beginning or top of your paragraphs, or both. You can use ems as your units or pixels or percentages.

What’s important is that we choose the way the browser will render it. For our example, I chose to add margins (instead of padding) both at the top of the paragraphs and at the bottom – but that’s my choice, you may want to do it differently.

Here’s what I used:

* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }

Example 3: Declaring a style rule after the universal selector.

Note: The example I used for discussion is a simplified example. If you only used paragraphs for your web pages and no other elements, you wouldn’t want to reset your margins to 0 using the universal selector only to declare a style rule right after it for your paragraph. We’ll discuss this more fully along with other best practices later on down the page.

Shortly thereafter – CSS guru Eric Meyer further built on the concept of resetting margins and paddings. In Eric Meyer’s exploration, he discusses Tanek’s work undoing default HTML styles (which he called undohtml.css) which not only resets margins and padding, but also other attributes like line-heights, font styles, and list styles (some browsers use different bullets for unordered list items).

After many iterations and refinements, we come to a wonderful solution called CSS Reset Reloaded CSS Reset, which not only makes this CSS reset method more accurate than the universal selector method by using higher specificity by naming all possible HTML tags (because the universal selector fails to apply the reset to all HTML tags), but also sets default values for troublesome elements like tables (in which the border-collapse attribute isn’t rendered consistently across browsers).

Of course, there are other methods of resetting your CSS (such as Yahoo!’s YUI Reset CSS which I currently use on Six Revisions), and you can roll your own based on your preference and project needs.

Now let’s go through some tips and best practices when applying a CSS Reset solution to  your own projects.

Applying CSS Reset: tips and best practices

1. Start by deciding exactly how you’ll reset your styles

Above, I’ve shown you the two extremes of CSS Reset. From a sweet and simple method using the universal selector (which I don’t recommend you using) to a more involved and complex method with Eric Meyer’s CSS Reset Reloaded (edit: or the more current version, Reset CSS).

I also briefly mentioned the YUI Reset CSS which you can use directly off the YDN so that you don’t have to serve it, saving you some server resources when your web pages are requested. You can also roll your own and tailor it to your specific needs.

There’s no pre-defined step-by-step method for determining the right way of resetting your styles; the important part is that it works to compliment your own development style and principles.

To help you make your choice, here are a couple of excellent resources to get you started:

2. Your CSS Reset has to be the first thing the browser sees (duh).

Resetting your styles after declaring a style rule for an element will mess you up. You’ll scratch your head wondering why the margins you declared for .some-class isn’t working. Therefore it’s essential that the first thing the browser sees is your CSS Reset.

Laugh now, but it’s a common mistake amongst rusty veterans and beginning developers.

Note: In case you fall into the “people-prone-to-this-common-mistake” category, here’s the reason why it has to be at the very top of your CSS document/s: CSS works on a top-down hierarchy with rules lower down the CSS document taking precedence if there’s a conflicting/redundant style rule declaration.

Just to continue beating a dead horse, let’s explore an example. I used Eric Meyer’s CSS Reset Reloaded verbatim in the example after declaring a style rule for the margin of my <p> elements.

Example 4: Putting your CSS Reset in the wrong place

I have the style rules at the examples’ HTML document (for convenience), so that you can view the source and see what I mean.

In essence, what you see is that even though I declared margins for my <p> elements, my CSS Reset “reset” them to 0 because it takes precedence over my initial style rule declaration.

3. Have a separate CSS document for your CSS Reset

I have to mention this tip because it’s common practice and one that many people advocate.

I’m on the One Big CSS File (of course it varies on a case-by-case basis) camp for page performance reasons (I’ll save this discussion for another day, perhaps on another CSS Tip article), but a common practice is to have a separate CSS document (named something like reset.css) that you can reuse throughout your projects. This helps you keep your style rules organized and modular, but more importantly, it makes it easier to change and tweak your CSS Reset without having to go back to your old projects and updating it.

4. Avoid using the universal selector reset

The universal selector reset is the first true conception (that I know of at least, so please correct me if I’m wrong) of resetting your styles, but it has many shortcomings and browser inconsistencies (which is what we’re trying to get rid of in the first place) that make it a poor choice.

I’ve already mentioned that IE doesn’t apply and support it as intended; it doesn’t cover all your bases and you should only use it for simple, short, static, and predictable web pages (if you really have to use it).

This tip especially holds true when you distribute a “one-size-fits-all” solution like a content management system theme which will be used and hacked in unpredictable ways. Using a solid foundation at the get-go – an extensive CSS Reset method – ensures that you’re truly resetting your styles and it’s worth the added bytes in your CSS document.

5. Avoid redundancy with your CSS Reset and subsequent style declarations

Another reason I don’t like having a separate stylesheet for my CSS Reset is that it can cause redundancies with other style rules after it. It’s good practice not to repeat your styles, and although sometimes it can’t be avoided (because you’re lazy like me), you should make an effort to try. Going back to Eric Meyer’s CSS Reset Reloaded set of rules, he gives default values for line-height, color, and background of the body element like so:

body {
  line-height: 1;
  color: black;
  background: white;
  }

If you already know that the body style attributes will be (for example):

  • background-color: #cccccc
  • color: #996633
  • and you want to tile a background image horizontally

there’s no sense declaring another CSS selector for the body element later on the document – you should replace that part of your CSS reset to the following:

body {
  line-height: 1;

  color: #996633

  background:#ccc url(your-tiled-image.gif) repeat-x top left;
  }

Don’t be afraid to use your own judgment. Tweak, re-structure, delete, and add things as you see fit and as it pertains to your particular case.

Eric Meyer echoes this in his discussion of CSS Reset Reloaded with the following statement:

[…] That’s much of the point here: that this is not a case of “everyone must use these styles in a certain way without alteration”.

Further Reading

Here are a few excellent resources that I recommend you read on the topic of resetting your styles.

[WSG] Zeroing default padding/margin

Probably one of the first threads that discuss the universal selector reset on the Web Standards Group mailing list.

Universal Selector

Eric Meyer discusses how the universal selector works.

No CSS Reset

Johnathan Snook discusses why he doesn’t reset his styles; a great counter-argument from one of the most respected web developers/designers out there.

Why I Like (and Use) Reset CSS

A short and sweet discussion of why resetting CSS is a great idea.

Tripoli – a CSS standard for HTML rendering

Tripoli is another popular CSS Reset option that has several versions so that you can use the one most appropriate for your project.

About the CSS Tips series

The CSS Tips series is a group of articles that focus on one particular CSS tip or best practice. In each article, I’ll deconstruct a particular tip/standard/best practice and provide the context, benefits, and disadvantages of each.

I believe in learning both theory and practice, as well as striking a balance between strict, uncompromising standards and practicality, so you’ll get a chance to learn the way people generally do it, and why you shouldn’t necessarily follow them blindly.

I’ll present each CSS tip as comprehensively as I can but I depend on you to correct me if I’m wrong, expound on things I skimmed over, clarify things that may be confusing to our fellow beginning developers, and provide your own input on the subject – so I highly encourage you to contribute in the comments.

To see all the CSS Tips articles thus far, you can go to the CSS category.

73 Comments

insic

November 19th, 2008

this is really a very good idea. In fact i used css reset since I start to learn CSS. Thanks for the post

Simon

November 19th, 2008

The one thing I hate about design is how all of the different browsers are different and need to be accounted for.

I use resets a bit but probably not enough and many designs therefore are flawed in so many browsers because of this (Why can’t everyone just use FireFox?)

Brian

November 19th, 2008

very informative. can’t wait for #2!

weblizzer

November 19th, 2008

such a great tutorial i’ve heard about the eric meyers reset css

Dicky

November 19th, 2008

I am using Blieprint CSS Framework, which comes with a reset stylesheet.

Andy Ford

November 19th, 2008

If you are going to use Eric Meyer’s reset, you’ll have better results with the more up to date version: http://meyerweb.com/eric/tools/css/reset/index.html The version linked in the article is an older version.

Neko

November 19th, 2008

I used Eric Meyers reset in all of my web projects and it saves me a ton of time when it comes to cross browser testing. ADD RESETS TO YOUR WEB TOOLBOX!!

// work smarter not longer //

Tad

November 19th, 2008

Great article! I have been using a combo of Eric Meyers reset CSS and parts on my own reset values on the last 10 or so projects I have been working on.

I am also going back to older projects and adding this in.

Really helps relieve that headache of browser compatibility most of the time.

Jacob Gube

November 19th, 2008

@Dicky: Good deal. I know that CSS Reset and CSS frameworks sort of go hand-in-hand, and I’m planning on talking about CSS frameworks in another CSS Tip article dedicated to it. I’ll frame the “CSS framework” issue (see what I did there?) in a comprehensive way, but in my opinion, at its current state, I don’t see a need for CSS frameworks (for many reasons which I’ll discuss later on).

@Andy Ford: Thanks for the correction, you’re completely right – I used the wrong bookmark on that one. I was comparing the different versions of Eric Meyer’s CSS reset and somehow I thought Reset Reloaded was the most current one (silly me).

Content Writing Advice

November 19th, 2008

why can’t these browsers just all get along. My biggest beef is with IE and having to test and make sure it didn’t mess anything up. great write up. looking forward to #2. Dugg

Honour Chick

November 19th, 2008

great css tutorial.

Donovan

November 19th, 2008

The CSS Tips Category link is broken.

Good article, thanks.

Jacob Gube

November 19th, 2008

@Donovan: I just realized that, thanks. I placed the “CSS Tips” category as a child of the “CSS” category and it doesn’t look like you can simply link to a child category – so I’ll probably end up creating a custom Page template on WordPress to display all the CSS Tips articles. But seeing as this is the first one, I’ll probably do that later on. For now, I’ve replaced the link to go to the CSS category.

Maria

November 19th, 2008

Well, CSS reset is pretty important for websites that emphasized on consistency. Thanks for the guide. ^^

Sébastien

November 20th, 2008

I really like the css reset and I’ve been using Eric Meyer’s for a long time. The only sad thing is that you can’t easily use it when you depend on some web frameworks (such as JBoss’s Rich Faces) because they have their own css and using the reset messes them up :(

relax

November 20th, 2008

Good article, thanks.

benjiBoomer

November 20th, 2008

CSS resets is a good idea, however, using the universal * selector to reset all margins and paddings is not.

Since the * selector applies itself to every element on the page the page load times are affected negatively.

The Eric Meyer reset is a better way of approaching the problem.

Liezzzje

November 20th, 2008

Thx for the CSS Reset link. I used to do all the CSS resetting manually in my stylesheet whenever I came across bothering browser rendering differences. But occasionally, I would forget a rule, which was very frustrating. I guess I’ll have to admit it. CSS still is a pain for me, but you just made it a little less painful :)

michi

November 20th, 2008

Great css tip. Thanks!

Qoska

November 20th, 2008

I also use Eric Meyers reset with some modifications to suit my preferences.

Great article.

Rishi Luchun

November 20th, 2008

Very handy thanks!

Filip

November 20th, 2008

bookmarked!

thanks for this good and clear article – very informative. can’t wait for #2.

TM Tech Department

November 20th, 2008

Eric Meyer’s reset CSS (compressed for speed) is now hosted on Amazon’s new CloudFront service. Direct link:

http://d35lae85h6tg07.cloudfront.net/reset.css

Ed

November 20th, 2008

Very good article, looking forward to #2.

John C. Reid

November 20th, 2008

I have started looking at CSS frameworks and reset style sheets lately, and I have come to a basic conclusion.

Why reset? Set instead. Simply put, replace your reset style sheet with one that SETs all the basic styles to the defaults you would like to start from instead. You still get a good baseline across browsers by setting all your styles to a standard format. I just don’t see the point of doing something to force me to specifically undo it later. I would much rather start with a style sheet that has a reasonable starting point that overrides the differences between browsers while at the same time making elements appear as I would expect them to everywhere.

So how about we see the death of the reset style sheet and the birth of frameworks with set style sheets. I think I will work on creating my own set.css in the near future.

Jacob Gube

November 20th, 2008

@John C. Reid: Yes, that’s an important point to emphasize, don’t reset a particular element’s style and then set it again later down the road. I meant to highlight that in tip 4 of avoiding redundancies and sort of mentioned it as a note right after Example 3, I guess I was not clear enough. That’s why I really appreciate the folks that take the time to leave a comment – I think a lot of the learning goes on in the comments section.

I like the set.css idea! Have a framework that has all the base styles, and you customize each entry based on the design you’re creating, instead of resetting, then setting again to undo your resets.

Dietmar

November 25th, 2008

I always like to have full control over my css stylesheets so resetting all the globals is always my first choice. Thanx for spreading this!

Michael Rice

November 25th, 2008

I’ve started resetting all of my style sheets nowadays. It makes it a whole lot easier at times styling elements and everything.

neoelia

November 25th, 2008

very good idea …
thanks :-)

David

November 29th, 2008

Doesn’t a reset stylesheet prevent (compliant) browsers from implementing their own user-agent styles? Is that fair? Or is tha answer just to rely on user stylesheets?

Jacob Gube

November 29th, 2008

@David: Fully resetting your styles, meaning giving every possible element a baseline style (even deprecated elements like <b> which User Agent stylesheets account for) does prevent browsers from implementing their default styles, so that’s fair.

I wouldn’t rely on User Agent styles to render your web pages correctly because they may change in the future (in a way that may or may not affect your design) – and not all browsers are standard-compliant.

For those curious about reading more about User Agent stylesheets, I recommend this article by Jens Meiert called User Agent Style Sheets.

Busby

December 1st, 2008

Im using Yahoo! reset, It is very useful and you can save a lot of time. CSS codes are only few but it works well.

Ashley

December 2nd, 2008

good Post.

I prefer css layout generator from (hubermann.com).
with this tool you can download the layout pre-builded with a reset css included into your css layout ;)

Anthony Damasco

December 10th, 2008

very useful, yahoo! reset is helpful to, but this is a little quicker, also better when working locally without the net

granit

December 20th, 2008

it is not true way to solve this matter

JOhnny C

February 18th, 2009

Thanks this is pretty cool, just inserted it at the top of my code and it fixed firefox vs. IE issues completely … (for the most part ;]

Cristian

April 5th, 2009

Here are a few excellent resources that I recommend to all read on the topic of CSS Attributes and Javascript Style Properties

http://www.navioo.com/html_css/CSS_Attributes_and_Javascript_Style_Properties_142.dhtml

Katy

July 5th, 2009

I spent hours fixing my first CSS website to work in all browsers but I couldn’t get it correct. I looked at another websites code (not thinking to search the blogs) and found the reset. It worked and never had a problem since. I wish I had found this article before I even started CSS. Thanks for having it!

Parro

July 11th, 2009

Can’t wait to see #2 man.

Trelston

October 6th, 2009

Nice. Had never heard of the concept before

WahidBitar

October 21st, 2009

That was very helpful. Thank you very much.

Denny

January 14th, 2010

sweet mother, this is what ive been looking for! thank you so much!

Ertan

January 17th, 2010

here we go!
nice tutorial

Alan

February 3rd, 2010

Thanks, I’ve been using the Yahoo reset suggested by my brother but never fully understood untill reading this, ta

Carolina

March 24th, 2010

I found this post while looking for some other information. Glad I found it! Thanks for the tips.

CSSReX

April 4th, 2010

Thanks, I have added all in my reset.css that are listed above.

James

April 10th, 2010

Great article. Good of you to include all aspects with Snook’s argument on no CSS and the arguments of different styles of resets. Very helpful!

affilojetpack

May 22nd, 2010

I am using Blieprint CSS Framework, which comes with a reset stylesheet.

Kode

June 8th, 2010

these are really awesome i like the playing cards and homer one really awesome!

vlddlv

June 15th, 2010

Great tips, i have to say that i’ve been using all of them for a while.

Cheers!

kKora yok

June 27th, 2010

good strafor

Tokyap

June 27th, 2010

a great tutorial i have heard about the eric meyers reset css

gondo

June 30th, 2010

whats wrong with universal selector? its fully supported in all major browsers (since ie5) in format what you posted
http://meyerweb.com/eric/articles/webrev/200006a.html

the only problem can be with speed. so if you got any example why is wrong to use it, please post it, cause i don’t know about any disadvantage.

reason that some “css guru” post it is not enough.

Jacob Gube

June 30th, 2010

@gondo: One reason I can give you: Performance. Selecting all elements and resetting them all to baseline values is terribly inefficient. For example:

* { 
margin:0;
padding:0;
list-style: none;
}

would try to apply the attribute to all elements, including p, h2, h3, table, td, tr, and so on – elements that don’t have that attribute. Lots of unneeded work. Then re-declaring the style rules for all the elements, is even more work.

Whereas Meyer’s CSS Reset encourages you to avoid these mass setting of attributes. If you already know that your ul and ol will have square bullets, you replace:

ol, ul {
  list-style: none;
}

With:

ol, ul {
  list-style: square;
}

This, in turn, avoids situations where browsers render your lists in the way they want to if you forget to set your baseline attribute/value pairs for particular elements, such as lists.

Whether you’re just resetting list-style or margin or whatever attribute, it’s not smart to reset all of them if you already know some of them won’t have, say, 0 margin and padding.

With that said, * has its benefits, including convenience, ease-of-use, and less time for maintenance of CSS. A good developer will evaluate their circumstances and make an informed choice.

animasyon

July 3rd, 2010

a great tutorial i have heard about the eric meyers reset css

Brett

July 29th, 2010

I have used reset previously for my own sites and saves a great deal of time. I am now doing a project where there will be an individual style sheet, for various users to modify themselves. I still wish to use reset, so where do I place it and when do I call it to play?

Craig

September 8th, 2010

Excellent article, have been guilty of resetting styles as we go, I think this is the far smarter option, Thanks!

Kim Green

September 17th, 2010

very helpful

Sherwin

September 21st, 2010

Wow, this is new to my knowledge. Very nice article especially for CSS beginners. Thanks for posting this one.

Anne

September 25th, 2010

thank you very much.
Today i have learnt how to convert psd to html/css

when i opened the page in google chrome, it worked fine…
but when i opened it in IE, everything messed up… :(
How to make a page so that all browser will show the same????

Sven

October 8th, 2010

Very nice. I had a same problem with my previous web site, so I prefer to use CMS for website design.

Nathan

November 20th, 2010

Thank you for the CSS Reset link. I used to do all the CSS resetting manually in my stylesheet whenever I came across bothering browser rendering differences. But sometimes, I forget a rule, which is very frustrating. I guess I’ll have to admit it. CSS still is a pain for me, but now it is a little less painful.

Hans

November 24th, 2010

Please, stop with this crap and learn how to slice… all the paddings of the UL and li’s will break.

Use a better doctype to fix the paddings and margins.

Hayalet

November 27th, 2010

thank you for post. great sharing..

Bambi Corro III

January 4th, 2011

Good thing I came across this site because I’m working on the redesign of my personal site. I’m using Ed Elliot’s CSS Reset, very short but practical. Thanks!

Anil kumar khichar

February 24th, 2011

Hi all, thank to all …nice discussion …one of my fend suggested it me and nw I m also using it…Tunis again to all you innovative people…keep it up…

Zia

May 27th, 2011

Nice sharing… very helpful!

mePraP

June 16th, 2011

Thanks for your informatics article.

Derek

June 17th, 2011

I never thought of reset CSS before. Now I know that! Thanks for your great “tips”!

arun

June 22nd, 2011

Thank you very much for nice info. But I got an same problem earlier.As a friend my suggestion is to use CMS tools like joomla,Drupal and wordpress.Thanks for sharing this type of post.

strafor

June 29th, 2011

Good thing I came across this site because I’m working on the redesign of my personal site. I’m using Ed Elliot’s CSS Reset, very short but practical. Thank you

strafor

August 25th, 2011

the css definition for and on the reset.css file from Eric Meyer should not include vertical-align: baseline as this would obviously defeat the purpose of superscripts and subscripts

Aaron Wright

August 29th, 2012

I agree with what a few other people have said. The browser inconsistencies are the reason I hate working with CSS. I much prefer to be on the programming end. But these are some good tips for dealing with such issues and making them a bit less painful.

Leave a Comment

Subscribe to the comments on this article.