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!
I’ve recently begun testing out the HTML5 Boilerplate and have tweaked the reset stylesheet with alot of the styles found there. I’ve edited and organized it so it’s easier to scan and find things.
/* general reset */
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;font-size:100%; }
/* html 5 reset */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
/* list style type reset */
ol, ul {list-style: none;}
There’s also resets for tables, inputs, general form elements, and pre & code boxes.
/* form & input resets */
select, input, textarea, button { font:99% sans-serif; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type=button], input[type=submit], button { cursor: pointer; }
input, select { vertical-align:middle; }
textarea { overflow: auto; }
button { width: auto; overflow: visible; }
:focus {outline: 0;}
/* table resets */
table {border-collapse: collapse;border-spacing: 0;}
td, td img { vertical-align:top; }
/* code & pre box resets */
pre, code, kbd, samp { font-family: monospace, sans-serif; }
pre { padding: 15px; background: #fafafa; border: 1px solid #cecece; white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; }
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;}
You’ll also notice some block quote styles:
/* blockquote reset */
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
There are some typography resets as well including changing the default font color to #444 instead of black. This drastically helps readability. You’ll also see a few custom styles like del, ins, em, abbr, strong, and mark. I’ve made them into classes so it’s easier to apply them inside your content.
/* headers */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: bold; }
/* link styles */
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
a:hover, a:active { outline: none; }
/* typography */
small { font-size: 85%; }
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
ins, .ins { background-color:#ff9; color:#000; text-decoration:none; }
mark, .mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
strong, .strong { font-weight: bold; }
em, i, .italic { font-style: italic; }
del, .delete { text-decoration: line-through; }
small, .small { font-size: 85%; }
abbr, .abbr { font-variant: small-caps; border-bottom: 1px dotted #cecece; cursor:help; }
The HTML5 Boilerplate also includes styles for text highlighting. A handy little way to add some extra flavor to your site.
/* highlight reset */
::-moz-selection{ background: #7eb9fc; color:#fff; text-shadow: none; }
::selection { background:#7eb9fc; color:#fff; text-shadow: none; }
As well as something to help clear floats (thanks to @simplebits).
.clear:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clear { display: inline-block; }
* html .clear { height: 1%; }
.clear { display: block; }
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;}
/* alignment */
.left {float: left;}
.right {float: right;}
/* images, videos, and more */
img, object, embed {display: block;}
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.
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.