demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS Resets

css / resets

Estimated reading time: 2 minutes

It became necessary to destroy the village in order to save it.

Unidentified US Army Major

Each browser inevitably has slightly different default values for appearance when displaying some tags. For example, the default body margin amount is different by 1 pixel between Internet Explorer and other browsers; Firefox will place a space between the top of an <h1> element and the top of the page (assuming the <h1> is the first element in the page), which follows W3C specifications, but IE will not.

In response to these inconsistencies, some web developers have developed “CSS Resets”, a series of style declarations that are intended to “wipe the slate clean”: setting the CSS back to a base layer of default values that are shared between all browsers.

Eric Meyer’s CSS Reset is probably the most well-known attempt at this, although Yahoo’s YUI reset is also well-regarded. Many CMS’s and frameworks, such as Wordpress, also employ a CSS reset before applying themes.

Personally, I consider most CSS resets overkill, the equivalent of flattening a building in order to redesign it. CSS reset files tend to be rather long, which increases file size, and the process of building up styles from the state of CSS left after a reset can be arduous. In addition, CSS resets tend to more focused on setting IE straight, which I would tend to deal with using a conditional comment. Finally, one can become so obsessed in making every browser “the same” that the design itself suffers: flexibility in the appearance of content from device to device is a feature of the web, not a bug.

That being said, there are a few declarations I typically make in a stylesheet that could be considered a “mini-reset”.

As the first declarations in a linked stylesheet:

* { border: none; }
body { margin: 0; font-size: 62.5% }

This turns border off for all tags under all states, eliminating borders on linked images and other elements. I also reset body margin to 0, and resets the font-size for all elements so I can size web page text correctly.

This minimal reset allows me to build my CSS without backtracking, avoiding moments of “Oh, I meant to do that”, or the tendency to add “fixes” for individual selectors.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.