Yea, “perfectest”. It’s a word. Anyway, I’ve been meticulously scouring the web for a perfect reset stylesheet. Something that will make the starting point for each project somewhat uniform. I’m pretty sure I’ve come pretty damn close and decided to post my findings here for your benefit. So take some time to check out what’s inside the file or skip down to the bottom and download it. Enjoy!
Right off the bat, you’ll notice alot of the common stuff you’ll find in almost every reset stylesheet:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0;padding: 0;vertical-align: baseline;border: 0;outline: 0;background: transparent;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
table {border-collapse: collapse;border-spacing: 0;}
I’ve also added a little gem (thanks to @hugsformonsters for the tip) to clean up Safari’s text rendering:
html {-webkit-font-smoothing: antialiased;}
As well as something to help clear floats (thanks to @simplebits).
.clear:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
Underneath this, you’ll find a few bonus styles that are commonly used on almost every site. You can change them up to suit your needs, but they are really useful and it’s a no brainer putting these in your reset stylesheet since you’ll always have a need for them.
/* text alignment */
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}
/* text formatting */
.small-caps, abbr {font-variant: small-caps;letter-spacing: 1.7px;}
.uppercase {text-transform: uppercase;letter-spacing: 1px;}
.lowercase {text-transform: lowercase;}
.strike {text-decoration: line-through;}
.underline {text-decoration: underline;}
strong, .strong {font-weight: 700;}
em, .em {font-style: italic;}
/* alignment */
.left {float: left;}
.right {float: right;}
/* images, videos, and more */
img, object, embed {display: block;}
/* code and pre blocks */
code, pre, .code { white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word; }
So by now you should see what i’m starting to get at. There’s no need to duplicate these styles now in your main css file. You can just create a pretty nice string just using these default styles.
Underneath these you’ll find some h1′s-h5′s each followed with a class to make styling text alot easier.
/******************************************************************
H1, H2, H3, H4, H5 STYLES
******************************************************************/
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a { text-decoration: none; }
h1, .h1 { font-size: 3.6em; line-height: 1.33em; }
h2, .h2 { font-size: 2.4em; line-height: 1.5em; }
h3, .h3 { font-size: 1.8em; line-height: 1.66em; }
h4, .h4 { font-size: 1.4em; line-height: 1.7em; }
h5, .h5 { font-size: 1.1em; line-height: 2.09em; }
Again, you can change these to your liking, but with all these default settings, your page should be off to a great start.
So here’s the whole thing. Just copy and paste it or you can download it here.
If you’ve got any suggestions as to what else I should put in here or if you see something that I’m missing, feel free to drop me a line on Twitter. You can follow me here.
