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.

0 Shares:
Leave a Reply

Your email address will not be published. Required fields are marked *

9 + nine =

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like
Read More

HTML & CSS: A Beginner’s Guide

HTML & CSS: A Beginner's Guide teaches you with the aid of colourful screenshots and diagrams how to create web sites and style them using Cascading Style Sheets. This book offers practical guidance, examples and know how without the long boring technical fluff and how to apply it to related Web development issues.

Text Resizing With jQuery

Want to allow visitors to increase or decrease the text size (font size) on your website? I’m going to show you how - using jQuery (a great JavaScript library).

Detect screen size with jQuery and apply a CSS style

Sometimes we need to format the content differently according to the screen resolution of the user. One of the ways to do this is to simply detect the screen width using the screen.width property and change the stylesheet.