CSS Reset

Every site I create, I always use the same basic css to get going.  It helps clear any default browser settings and levels the playing field between them.

There are a few notable css reset sheets out there such as ones from Eric Meyer and Yahoo.  I have tried both and think both are overkill for almost every site I create.  I have added to and adjusted my CSS starting point over all the sites I have built and am pretty comfortable with what I have now.

Heres the CSS code that I currently use:

* {
   padding: 0;
   margin: 0;
}

body {
   text-align: center;
   font-size: 62.5%;
   color: #2B2B2B;
   padding: 0;
}

div, p, ul, ol, dl, h1, h2, h3, h4, h5, h6, table, hr, form {
   float: left;
   clear: both;
   width: 100%;
}

a {
   text-decoration: none;
   outline: none;
   color: #548be5;
}

a:hover {
   text-decoration: underline;
}

a img {
   border: none;
}

p {
   margin: 0 0 10px 0;
   line-height: 1.3;
}

.middle_align {
   text-align: center;
}

.left {
   float: left;
   clear: none;
   width: auto;
}

.right {
   float: right;
   clear: none;
   width: auto;
}

.left *, .right * {
   float: left;
}

.wrapper {
   text-align: left;
   float: none;
   width: 996px; /* set to page width */
   margin: 0 auto;
}

.container {
   position: relative;
}

It should be noted that this CSS is for a center aligned site design, which covers the majority of the sites I code now.

Is there anything that you do different with your CSS reset?  Do you even use one?  With the above code, I can pretty much make the site look the same across the major browsers (including IE6) the first time without too much tweaking.

3 Responses to “CSS Reset”

  1. Ryan says:

    Alastair, I usually code all the properties by hand as needed. To make sure you aren’t missing anything you’ve just got to test in all the browsers.

    There are some things that come up such as when a client places tables or other elements I didn’t forsee, but they’re easily addable later.

  2. With reset stylesheets, I always wonder if people have a default “un-reset” that they use just after, to setup defaults that are similar across most or all projects, or is it handled in the reset, or always set by hand later? If so, how do you ensure you don’t miss a property?

    – Alastair.

  3. joseph says:

    i really enjoy your blog.

Leave a Reply