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.

One Response to “CSS Reset”

  1. joseph says:

    i really enjoy your blog.

Leave a Reply