Web Development Basics: What Is A CSS Reset?

CSS ResetLet’s assume for simplicity’s sake that websites are made up of just HTML and CSS. The HTML contains the content and document structure; the CSS controls the layout.

What happens if you open a document in your browser without a CSS stylesheet?

If you have no knowledge of web design, you might assume that the result would be a completely unstyled document, but that’s not the case. Every browser has a default stylesheet that it applies to web pages. Even HTML without styling will take on a basic structure because of these default stylesheets.

That’s great, but it introduces a problem. Each browser has a slightly different default stylesheet, which makes the “unstyled” HTML appear differently. Because of how CSS inheritance works, it can also make it difficult to predict how a styled page will appear. If a designer doesn’t explicitly override a style in the default sheet, it will still be applied.

Let’s say the designer neglects to apply a style to the top-margin of a paragraph. Some browsers will add a margin and some won’t. The result is that the margins will be different depending on the browser that loads the page, something we’d ideally like to avoid.

CSS resets exist to solve this problem. The most basic CSS reset — called the hard reset — looks like this:

* {padding:0; margin:0;}

It uses the universal selector (*) to select every element, and applies a 0 pixel border and margin; it overrides any border and margin settings in the browser stylesheets, fixing the example problem we just looked at. Unless the designer explicitly overrides the hard reset, they can be confident both of the value of borders and margins and their appearance in all browsers.

The universal selector can itself introduce problems, so an enhancement of the hard reset — sometimes referred to as the Poor Man’s Reset
is often used instead:

html, body {padding: 0; margin: 0;}
html {font-size: 1em;}
body {font-size: 100%;}
a img, :link img, :visited img {border: 0;}

The most popular browser reset is Eric Meyer’s css.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, 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;
}

Although strictly speaking a reset simply “zeroes out” the browser’s default CSS, over the years, CSS resets have become increasingly complex, ranging from comprehensive resetting of most HTML elements to opinionated application of a particular designer’s style.

You can see and download some of the most popular CSS resets from CSS Reset.

Many web designers will use an alternative to a traditional style sheet reset called Normalize.css, which is more comprehensive than a traditional reset. Rather than simply resetting values, Normalize implements sane defaults — in the developer’s opinion — that make it faster to get started on developing a site.

It goes beyond the scope of traditional CSS resets, by correcting:

“some common bugs that are out of scope for reset.css. It has a wider scope than reset.css, and also provides bug fixes for common problems like: display settings for HTML5 elements, the lack of font inheritance by form elements, correcting font-size rendering for pre, SVG overflow in IE9, and the button styling bug in iOS.”

Both resets and Normalize exist to make life easier for web designers and developers, providing them with a predictable and relatively uniform environment within which they can build their own styles.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.

GET STARTED