Advertise Here
Create Your Own Reset.css File

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

Jeffrey Way on Aug 8th 2008 with 68 comments
Share

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.

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.

XEROX CODE 
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!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

Share
By Jeffrey Way

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm a simple person. I help out with two Envato marketplaces, and am the editor of Nettuts+. I also love to play guitar, and embarrass my wife-in-training, Allie, by playing Steel Dragon songs loudly with the windows rolled down in front of movie theaters. During my free time, I sporadically update my blog. Follow us on Twitter, and subscribe to the official Nettuts+ YouTube page.  

Plus Premium

Premium Members

Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now

 
 

Related Posts

Add Comment

Discussion 68 Comments

Comment Page 2 of 2 1 2
  1. Jesse says:
    August 12, 2008 at 7:37 am

    @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

    Reply
  2. Jeffrey Way says:
    August 12, 2008 at 7:48 am

    @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”.

    Reply
  3. Jesse says:
    August 12, 2008 at 11:22 am

    Thanks for the clarification, Jeffrey! This site rocks!

    Reply
  4. Alexander says:
    August 13, 2008 at 10:58 am

    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;
    }

    Reply
  5. cchana says:
    August 18, 2008 at 1:43 am

    @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.

    Reply
  6. Daniel Attie says:
    August 20, 2008 at 8:32 pm

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

    Reply
  7. Romario says:
    August 31, 2008 at 8:43 am

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

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

    Reply
  8. Justin St. Germain says:
    September 3, 2008 at 9:01 am

    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%; }

    Reply
  9. page says:
    September 30, 2008 at 1:49 am

    nice tip! thanks

    Reply
  10. Katrina says:
    October 31, 2008 at 10:53 pm

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

    Reply
  11. Advance web development says:
    November 13, 2008 at 1:42 am

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

    Reply
  12. Deepak says:
    November 29, 2008 at 5:27 am

    Oh it is really great.

    Reply
  13. John Dangerous says:
    February 17, 2009 at 6:40 am

    How does this work exactly? I’m not sure I understand…

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

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

    Reply
  14. Zoran says:
    March 26, 2009 at 4:41 pm

    Great tip!

    I think that every serious CSS coder should have CSS-reset system, written by himself. Every of us have different needs and approach, so all we need different reset. Here’s mine (just a part of my framework):

    a img, :link img, :visited img {border: 0;}

    ul, ol {list-style: none;}

    table {border-collapse: collapse; border-spacing: 0;}

    body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, table, th, td, embed, object {padding:0; margin: 0;}

    :focus {outline: 0;}

    :link,:visited { text-decoration:none }

    Reply
  15. Haavard Lund says:
    November 4, 2009 at 2:51 am

    Thanks a lot for sharing this, Jeffrey!

    I am currently developing some WP templates, and as it’s been a while since I did any HTML and such, a few headaches was inevitable (wait, let me check.. yup, still there).

    I am pretty sure some of those headaches could have been avoided, if I used something like the reset definitions in your CSS file, and I am most definitely going to save it and have it ready for my next projects!

    Thanks again, I very much appreciate it!

    Reply
  16. Michelle says:
    December 14, 2009 at 12:12 pm

    this is great, I am going to share it on my own blog. Thanks

    Reply
Comment Page 2 of 2 1 2

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.