CSS Reset

CSSGLOBAL RESETS

What isCSS reset?

All browsers have adefault style sheet.

The problem is that these defaultstyle sheets are different in each

browser.

CSS resets aim to remove allbrowser-specific styles, and thenbuild CSS up again from scratch -so that each element will appear

the same in all browsers.

The simplest reset involvesremoving the margin and padding

from all elements using theuniversal selector.

*{

margin: 0;padding: 0;

}

However, this reset canadversely affect some form

elements that should not havetheir margins and padding

removed.

More advanced CSS resets aimto reset almost every aspect of

every element:

• Set margins and padding to zero• Set borders to zero

• Remove visual list styles• Set fonts to a base

• Set font-weight and font-style to normal

Two of the most widely usedCSS resets are:

Eric Meyer Resethttp://meyerweb.com/eric/thoughts/2007/05/0

1/reset-reloaded/

YUI 2: Reset CSShttp://developer.yahoo.com/yui/reset/

Are CSS resetsa good idea?

Some people love CSS resets,and others hate them. There is no

right or wrong, only opinions!

I have three main concernswith CSS resets

Every element that is “zeroed”must then be redefined. This can

cause an increase in CSS filesize.

CSS Resets can present issues ifyou remove the default behaviourfor an element and then forget to

restyle it.

Some resets can be harmful tousers who rely on keyboards for

navigation.

:focus {outline: 0;}

A lighter CSS resetexample

I prefer to use a smaller set ofCSS rules that mean that only

common or problematicelements are reset.

html, body, ul, ol, li, form,fieldset, legend{

margin: 0;padding: 0;

}

1. Remove margin and paddingon some key elements only

h1, h2, h3, h4, h5, h6, p{

margin-top: 0;}

2. Remove top margins onheadings and paragraphs

fieldset, img{

border: 0;}

3. Remove fieldset and imageborders

table{

border-collapse: collapse;border-spacing: 0;

}

4. Set table borders andspacing

caption, th, td{

text-align: left;vertical-align: top;font-weight: normal;

}

5. Set caption, table header andtable data cells

legend{

color: #000;}

6. Apply color to fieldset(to overcome IE color issues)

input, textarea, select{

font-size: 110%;line-height: 1.1;

}

7. Apply font-size and line-heightto input, textarea and select

li{

list-style: none;}

8. Remove list bullets

abbr, acronym{

border-bottom: .1em dotted;cursor: help;

}

9. Apply border-bottom andcursor to abbr and acroynm

sup{

vertical-align: text-top;}

sub{

vertical-align: text-bottom;}

10. Vertical-align sup and sub toavoid line-height issues