CSS Tip #1: Resetting Your Styles with CSS Reset

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):

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.

This was published on Nov 18, 2008


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

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?)

very informative. can’t wait for #2!

weblizzer Nov 19 2008

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

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

Andy Ford Nov 19 2008

If you are going to use Eric Meyer’s reset, you’ll have better results with the more up to date version: The version linked in the article is an older version.

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 //

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 Nov 19 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 Nov 19 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 Nov 19 2008

great css tutorial.

Donovan Nov 19 2008

The CSS Tips Category link is broken.

Good article, thanks.

Jacob Gube Nov 19 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.

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

Sébastien Nov 20 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 :(

Good article, thanks.

benjiBoomer Nov 20 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 Nov 20 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 :)

Great css tip. Thanks!

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

Great article.

Rishi Luchun Nov 20 2008

Very handy thanks!


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

TM Tech Department Nov 20 2008

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

Very good article, looking forward to #2.

John C. Reid Nov 20 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 Nov 20 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 Nov 25 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 Nov 25 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 Nov 25 2008

very good idea …
thanks :-)

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 Nov 29 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.

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.

good Post.

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

Anthony Damasco Dec 10 2008

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

it is not true way to solve this matter

JOhnny C Feb 18 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 Apr 05 2009

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

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!

Can’t wait to see #2 man.

Trelston Oct 06 2009

Nice. Had never heard of the concept before

WahidBitar Oct 21 2009

That was very helpful. Thank you very much.

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

here we go!
nice tutorial

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

Carolina Mar 24 2010

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

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

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 22 2010

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

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

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


kKora yok Jun 27 2010

good strafor

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

whats wrong with universal selector? its fully supported in all major browsers (since ie5) in format what you posted

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 Jun 30 2010

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

* { 
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;


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 Jul 03 2010

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

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?

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

Kim Green Sep 17 2010

very helpful

Sherwin Sep 21 2010

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

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????

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

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.

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 Nov 27 2010

thank you for post. great sharing..

Bambi Corro III Jan 04 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 Feb 24 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…

Nice sharing… very helpful!

Thanks for your informatics article.

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

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 Jun 29 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 Aug 25 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 Aug 29 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.

This comment section is closed. Please contact us if you have important new information about this post.