Create Your Own Reset.css File

Weekend Quick Tip: Create Your Own Simple Reset.css File

Aug 8th in HTML & CSS by Jeffrey Way

Far too many novice CSS designers don't realize the importance of creating a "reset.css" file. When you have an environment where each browser has its own "default" styling, you'll often find yourself thumping your skull as you ask yourself, "Why is there a spacing here?" To save yourself some of the headaches that you'll undoubtedly experience, you'll need to create your own simple reset file. The problem with using one of the many currently existing frameworks is that they aren't tailored specifically to you. For example, I never use the deprecated "center" element in my projects. Consequently, I don't need to put it into my default styling. However, others may need to do so - though they would deserve a slap on the wrist...or the buttocks if you're so inclined.

Author: Jeffrey Way

Hi, I'm Jeff. I'm the editor of NETTUTS, and the Site Manager of Theme Forest. I spend too much time in front of the computer and find myself telling my fiance', "We'll go in 5 minutes!" far too often. I love the ASP.NET framework, jQuery, PHP, CSS, AJAX - pretty much anything.

Step 1: Zero Out Your Margins And Padding

By default, the browsers will add margins to many elements. For example, typically there are about six pixels of margins on the body element. As the designer, you should be the one specifying these figures! (Except maybe when it comes to font size - which is a whole other topic to be debated at length.) So let's zero out a bunch of these elements! 

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,
ol, li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}

Step 2: Take Control Of Your Elements

You may have noticed that your elements vary in size from browser to browser. You can change this by setting the default font-size to 100%. 

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
}

Next, we'll need to define the margins and padding for our heading elements. I'm also going to remove the list-style-type from my list elements. Lastly, I'll set a base font-size for the body element. 

body
{
line-height: 1;
font-size: 88%;
}

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
padding: .6em 0;
margin: 0 15px;
}

ul, ol
{
list-style: none;
}

img
{
border: 0;
}

Step 3: Expand

I typically like to include a few common classes that I use in all of my projects. You may or may not choose to use these yourself. 

.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}

.floatRight
{
float: right;
padding: .5em 0 .5em .5em;
}

Here Is Our Final Simple Reset.css File.

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}

body
{
line-height: 1;
font-size: 88% /* Decide for yourself if you want to include this. */;
}

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
padding: .6em 0;
margin: 0 15px;
}

ul, ol
{
list-style: none;
}

a
{
color: black;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}

.floatRight
{
float: right;
padding: .5em 0 .5em .5em;
}

At least for me, this is all I need to get started with a new website. For your own projects, you should expand upon what I have here so that it best suits you. You should probably specify the margins on more of your commonly used elements, like the paragraph tag.

If you wish to have a 100% reset file, I recommend that you refer to Eric Meyer's popular "Reset CSS" file. Alternatively, you can check out the YUI Reset CSS. See you on Monday!


Related Posts

Check out some more great tutorials and articles that you might like

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

User Comments

( ADD YOURS )

  1. Hayes Potter August 8th

    very nice tutorial, I have done a lot of these little css extras. Thanks.


  2. Craigsnedeker August 8th

    Cool, but what does it do?


  3. Craigsnedeker August 8th

    I think I see why you have it, yeah. Thanks for this!


  4. Connor August 8th

    @Craigsnedeker it basically resets all of the annoying defaults that browsers automatically do to a web page. Like automatic margins or padding put on the tag.

    Nice quick tip


  5. Ben Griffiths August 8th

    This is a really great idea, can’t believe I’ve never heard of this before! Definitely on my “implement in the future for everything” list :D


  6. Ryan Imel August 8th

    Yeah, I would highly suggest Eric Meyer’s. And keep an eye on his site too, he updates it every now and then.

    One criticism I would have of this method is that it tends to be combining rest styles in with layout styles. I tend to think of the reset.css as a stylesheet that is only for zero-ing out all of the browser default styles. Some of the ones you throw in at the end might be better suited for a layout.css starter file (every CSS file should have a starting position). While you should definitely have those styles, it might be a bit better to organize them into a different place. I would never think to look into your reset.css file looking for layout styles.


  7. Jeffrey Way August 8th

    @Ryan - Very good point. That is why I said that this is mainly tailored for my style. But, you are absolutely correct. For everyone else reading this, if you don’t want to have any layout styling, be sure to take out the classes and other layout styling.


  8. Marvin August 8th

    very nice. it really includes all the neccessary stuff. good opportunity to all the other resets! nice tip!


  9. Craigsnedeker August 8th

    @Connor: Ok thanks!


  10. Braden Keith August 8th

    Ahh very nice. I don’t really have a detailed one, usually just sticking with the *{margin:0;padding:0;} but this would be nice to have on file.

    And is there an email I can reach you at Jeffrey? I understand if you rather not post it for the WWW, but if you’d shoot me an email, as I know you can see mine, I’d appreciate it. Thanks!

    Glad to see multiple tutorials coming a day. That’s what a tuts site should be.


  11. XeoKeri August 8th

    .floatRight
    {
    float: rightright;
    padding: .5em 0 .5em .5em;
    }

    If you notice, it says “float: rightright;”.

    Shouldn’t it be “float: right;” ?

    - Xeon


  12. Nate August 8th

    Nice and simple. I have used eric meyers reset technique as well as yahoo’s. Both work pretty good.


  13. kailoon August 8th

    so, any different if i use * { margin: 0; padding: 0; } ?


  14. yaddi August 8th

    thanks for this article, i never realize why should reset all the margin and span to 0 before.
    but, what is the different to *{margin:0px; span:0px; }


  15. fat guy August 9th

    i dont get it

    why the hell i need this file for


  16. Sasa Bogdanovic August 9th

    I agree with Ryan, but to avoid an overhead of extra HTTP request, instead of putting the layout styles in separate files it is better to combine them in one. Then it is up to your own style how you will visually separate them if you want.

    Using CSS reset is not a must and there are no specific rules how to use it, except of applying it first before any layout styles. We do not have to be so rigid and implement a single file for each and every functionality we are having in CSS files. Simply, have one file, have different sections in it and there you go.

    If your point is reusing the CSS code in multiple projects, then you can have a repository of your CSS (and any other snippets, JavaScript, PHP, whatever) files with their functionalities and then copy and paste what you need when you need it.


  17. bartaz August 9th

    The ‘reset’ part of this tutorial is great, but I would argue about floatleft and floatright classes.

    I’m really crazy about semantic mark-up and so I use class names that have some semantic meaning. ‘Floatleft’ and ‘floatright’ class names tell us not what the element IS but HOW IT LOOKS.


  18. BroOf August 9th

    Very usefull quicktip!


  19. Craigsnedeker August 9th

    I normally cover all those in my normal CSS, and edit them there, is that ok, or should I use a backup one also?


  20. andi August 9th

    Don’t really get it either - if you can’t remember why you have spacing and so forth, why didn’t you comment the file properly when you made it in the first place?


  21. Alassea August 9th

    Nice tut! This will come in handy


  22. Jeffrey Way August 9th

    @Craigsnedeke - If you already cover them in your main stylesheet, you should be fine.

    The reason that it is smart to have these in their own separate file is because of “reusability”. For every project, I only need to import this file.

    If you prefer to use only one stylesheet for your entire project, just copy and paste. I typically prefer two.

    @andi - Developers are notorious for not commenting properly. I’m sure we’ve all been stumped at one time or another.


  23. Dan August 9th

    Wow a lot of complaining and general whining on this one.
    Resets are useful navigate your way over to google and do some resaerch on resets. This is a tutorial site not a general knowledge base.

    Resets are not a must but can be very helpful and take away some headaches. This is by far not very in depth and kudos to the author for doing so. They will likley vary from developer to developer because everyones tastes and coding level are different. This is a great basic reset. Thanks for introuducing the idea to the community here.

    If you want to put it in your main sheet, do it. It is fine to do so, the author was just stating his prefrence.

    Good grief a lot of complaining over a free weekend QUICK tip.


  24. Shane August 9th

    @Dan - there’s always whining :)

    I use reset CSS - what this tutorial has done is explain the why and the how. Most likely, people will be using Eric Meyer’s reset or something similar.

    I think he knows a thing or two about CSS doesn’t he?

    :)


  25. Andy Ford August 9th

    For those who’ve been asking about ‘* { margin: 0; padding: 0; }’…
    I’ve found that it can provide unexpected results with form elements - especially the SELECT element. And you end up with different results in different browsers - exactly what a reset.css file is trying to save you from. CSS resets are intended to level the playing field across all browsers, not provide varying results. Also, some people argue that by using the “all” selector (*), it can be very taxing on the browser and cause longer rendering times. I’ve never seen any compelling evidence to back up that claim, but it’s worth considering.

    Personally, I’ve found that the best CSS reset to start with is Eric Meyer’s reset. Make sure you get it from here: http://meyerweb.com/eric/tools/css/reset/index.html … I still see a lot of people using and recommending outdated versions of the Eric Meyer reset.


  26. liz August 9th

    great article, i also add to my reset a link to the png fix hack file for IE:

    img, div, ul, li { behavior: url(iepngfix.htc); }


  27. Todd August 9th

    Taking the outline out of the a type selector is, and should be a big no-no due to accessibility reasons. I urge people to keep the outline in for links, even if that little dotted box annoys you or others. Some people depend upon it.


  28. Christian August 9th

    Nice post. Thanks. :)


  29. Fouad Masoud August 10th

    I just use
    *{margin: 0; padding: 0;}

    i used so many of those rests and i built my own but you know what *{margin: 0; padding: 0;} is far better than it all.


  30. kailoon August 10th

    If the * isn’t included the form elements, then I only need to add some of them later. No need to have a long list like this, right?


  31. kailoon August 10th

    By the way, I still prefer to use separate stylesheet for a single project. Then I can manage it easier :) For example, css for colors, typography and main stylesheet.


  32. Jeffrey Way August 10th

    @kailoon and @ fouad - From what I’ve read, the * can be more taxing. Plus, there is much more to reset than just the margins and padding. I’d take my cues from the best CSS developers in our field. They don’t simply use the “*”.


  33. Tom Leo August 10th

    I would suggest taking a look at stocks or meyer’s reset.css, as well as the ones that come with many CSS frameworks because they add some subtle things you would probably have never though of.

    It’s also not a bad idea, once a project is finished to start pulling out elements that you did not use, then optimizing the reset as well as your other style sheets for the web.


  34. Miles Johnson August 10th

    This is all you really need, most resets are full of bloat.

    * { margin: 0; padding: 0; border: none; }


  35. Rob August 10th

    Great article — I’ve used “* {margin: 0; padding: 0;}” up until now, but will now be using this newer and better technique. Thanks!


  36. Serpentarius August 10th

    There’s plenty of css reset technique available. I’ve use Eric Meyer’s technique for quite some time and I haven’t found any problems whatsoever. Nice tuts though… thanks


  37. Andrew August 10th

    “outline: none; ”

    can’t help but feel that’s a stupid move. Outline is an important visual aid.


  38. insic August 10th

    nice tut. i didnt use css reset maybe i end messing up sometimes. thanks


  39. Ryan Imel August 10th

    @bartaz: I agree with you about “floatleft” and “floatright” classes being visual aides and not semantic ones. A similar technique is to assign classes like “alignright” and “alignleft” to elements, usually images. And these aren’t semantically helpful.

    I have used a slightly different nomenclature for dealing with elements, particularly images. Instead of visual markers like “alignleft” or “floatright” I use “main”, “major”, and “minor”. Or variations of this. So an image with a class of “main” would probably be centered, or have a visual focus of some sort. An image with a class of “minor” would be floated to the right, etc. The nice part about this is that, whenever a redesign comes up, I can look at my content and decide how I want to design my new site in regard to the weight of the content, which is determined by the semantic nature of the images and such. It’s much easier to style img.main and img.minor later on than it is to do the same for img.alignright.

    It should be said that designers do tend to divide on this issue. Some slant toward the semantic-nazi side, as you and I apparently do (and many others), while others take what could be called a more practical approach, more interested in developing consistencies across the web, and stick with what’s easily used. Thus, alignright and similar classes have become popular.

    I went on more about this at my blog a year or so ago. Sorry for the long comment, but I do feel this is an important issue worth discussing.


  40. mattems August 10th

    Great post.

    All the people who are using * {} i would suggest not to, it can be heavy. Specifying the selectors is a much better way, and once you have created your own reset css you can just use it over and over.

    also…

    float: rightright? is this a typo or some cross browser fix / hack?


  41. Josef Baros August 11th

    Great, but there is one problem with padding: 0; and input type=”text” in forms. When you fill in entire text box with characters, text cursor on the right side disappears. This happens in IE and Opera. Example you can see on my site. Pepa


  42. revy August 11th

    good article. It’s nice to see more people doing these kinds of global css resets. Maybe browser developers will get a clue. :)


  43. Danilo August 11th

    * {…} should not be used. It resets way too many unnecessary attributes and takes away parsing time. Plus, inheritance destroys the resets in a few cases and browsers.

    outline: 0 is not an accessibility issue. The point here is that browsers outline differently - and you reset this. You should however define :focus styles later on in your stylesheets. Outline is just what most browsers use therefore, basically you can use any style you want to focus things.


  44. Jonathan August 11th

    I think a reset is a must, I use it to start every design on a clean slate (my slate - lol). Also, as Jeffrey said, it’s great for “re-usability”. For instance I hate clicking a link and having the dotted outline surround it while the page loads so as default I use a:link, a:visited {outline: none; }
    Point is with a reset css file you have less surprises.


  45. Ty (tzmedia) August 11th

    A common reset file is good practice, IMO. But not working with those basic and commonly used elements and tags is the quickest way to code bloat I know of.
    There should be a common paragraph style, in the main content section as well as H1 - 6 etc. Otherwise you get what is commonly referred to as classitis. When all you had to do was define the common elements.
    The reset is really about consistency across the browsers, not negating everything to zero styling and then leaving it there.
    The W3C has a good default stylesheet, to get started with after a reset:
    http://www.w3.org/TR/CSS21/sample.html
    So many of the CSS frameworks provide sheets that may be handy, but don’t just blindly drop them all in the design, things will spiral out-of-control.


  46. Duluoz August 11th

    To all the reset fans, I would highly recommend you read the following articles:

    http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/

    http://snook.ca/archives/html_and_css/no_css_reset/

    Pay close attention to Jens Meiert’s article, as well as may of his other articles on CSS and HTML. I think you’ll be schooled quite a bit on many of the misconceptions and flat out wrong information out there.


  47. Jesse August 11th

    I may be mistaken, but don’t all floated elements have to have a specified width?? Wouldn’t want that black eye as part of my reset. Overall, though, nice job! I haven’t done enough to warrant a full-fledged reset yet, but I’m sure it’ll come. :)


  48. Jeffrey Way August 11th

    @Jesse - No. You don’t have to specifically state the width of floated elements.


  49. Taylor Satula August 11th

    Personally i rool eric m.’s reset sheet but a tut on how to do is great too


  50. Taylor Satula August 11th

    WOW… i spelled roll wrong. Sorry spelling junkies


  51. Jesse August 12th

    @Jeffery Way - Um, per the W3 specs, section 9.5, “A floated box must have an explicit width (assigned via the ‘width’ property, or its intrinsic width in the case of replaced elements).” http://www.w3.org/TR/REC-CSS2/visuren.html#floats
    Doesn’t that mean that every floated element MUST have an explicit width? That’s the way I read it. Maybe the better question is when does a floated element become a “box”, or can you float other things besides boxes? It seems to say that when you float anything, it automatically becomes a box as far as positioning is concerned. Any clarification is appreciated, b/c I’ve been declaring widths to everything I float (usually pics/w captions, etc.) and if I don’t need to do so, please let me know! Thnx


  52. Jeffrey Way August 12th

    @Jesse - Sorry. I wrote that last comment in a hurry and should have been more specific. If you’re floating a div with text (or something similar), then yes you would need to declare the width. Otherwise, it will take up all of its available space. However, if you’re floating something like an image, it isn’t required - as it will refer to the image’s size as a “base”.


  53. Jesse August 12th

    Thanks for the clarification, Jeffrey! This site rocks!


  54. Alexander August 13th

    Why not use an asterisk (*) to just select everything and “margin: 0; padding: 0; border: 0; outline: none;”?

    That is:

    * {
    margin: 0; padding: 0; border: 0; outline: none;
    }


  55. cchana August 18th

    @Alexander, if you asterisk, then literaly everything gets given the same values, which in theory sounds great, but in practice doesn’t work so well.

    personally, i don’t like using a reset file, but i know a few front end developers that swear by them. From my own experience, I’ve found that the more I play with CSS, the more I’m able to get your head around how different browsers work and how to use their quirks to my advantage. wasn’t always this way, but being able to work with a browser’s defaults styles rather than against has made things easier for me.


  56. Daniel Attie August 20th

    Good but i recomend to use “Reset CSS by Eric Meyer” (v.final)


  57. Romario August 31st

    You r so great and i am really want these advices .

    Please write more of how to write css simple and short.


  58. Justin St. Germain September 3rd

    i would only add a couple more things to this for a reset fix…

    .clearfix { display: block; clear: both; }
    .floatbox { overflow:hidden; }
    .float-left { float: left; overflow: hidden; }
    .float-right { float: right; overflow: hidden; }

    .width20 { width: 19.999%; }
    .width25 { width: 24.999%; }
    .width33 { width: 33.333%; }
    .width50 { width: 49.999%; }
    .width66 { width: 66.666%; }
    .width75 { width: 74.999%; }
    .width100 { width: 100%; }


  59. page September 30th

    nice tip! thanks


  60. Katrina October 31st

    nice ways to draw a table on a dream weaver ….. thanks for sharing


  61. Advance web development November 13th

    It is a very nice tutorial and easy to understand. Thank for sharing.


Add Your Comment

( GET A GRAVATAR )
  • Gravatar

    Your Name November 21st

Arrow