Using reset.css file to get full control

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. So why using a reset.css file? Its very simple – for full control. I don’t want any formatting on my websites that I didn’t specify.

Resetting your styles, commonly referred to as CSS Reset or Reset CSS is the process of resetting (or more accurately – setting) the styles of all elements to a baseline value so that you avoid cross-browser differences due to their built-in default style settings. By resetting your styles, you avoid defaulting to the browser’s built-in styles, which differs from browser to browser.

CSS Reset avoids browser inconsistencies

For example, say you use an anchor tag 

<a>

 in your HTML document. Usually, browsers like Internet Explorer and Firefox will render it as blue and underlined.

Here are my default reset.css files with some quick points following the code:

/* global */* { margin:0; padding:0; }
body { background:#fff; padding:15px 0 30px 0; font:11px arial, helvetica, sans-serif; }

/* tags */h1 { padding:0 0 15px 0; }
h2 { padding:5px 0 0 0; }
label,select { cursor:pointer; }
li { line-height:15px; margin:5px 0 0 0; }
ol, ul { padding:0 0 10px 35px; }
p { line-height:15px; padding:0 0 10px 0; }
textarea,input { font:11px arial, helvetica, sans-serif; padding:2px; }

/* custom */.clear { clear:both; }
.input { border:1px solid #ccc; padding:2px; }
.page-break,.print-only { display:none; }
.point { cursor:pointer; }

/* links */a { color:inherit; }
a:link, a:visited { color:#00f; text-decoration:underline; }
a:hover, a:active { color:#00f; text-decoration:none; }
a img { border:0; }

/* print media */@media print
{
/* global */body { color:#000; font-size:9pt; }

/* layout */#wrap { width:600px; }

/* custom */.print-only { display:block; }
.page-break { page-break-before:always; }

/* links */a { text-decoration:underline; color:#999; }
}

or

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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Global Settings

There are some settings that you can set globally so you might as well do so. Be wary, however, of what you put in the “*” setting as opposed “body” setting. For example, setting the font-size property in the ‘*’ selector will change the font-size of the ‘<b>’ tag — you will only want the bold tag to change the font-weight to bold, not change the font size. Place the global font-size in the <body> tag.

No Margin & Padding

Microsoft Internet Explorer and Firefox use a very different set of rules for margin and padding and I’d much rather not take the chance that margin look different in either browser.

Screen & Print Together

Putting my basic print needs in the reset.css file saves a request to the server, no good reason besides that.