CSS Reset

All browsers have a
default style sheet.

The problem is that these default
style sheets are different in each
browser.

CSS resets aim to remove all
browser-specific styles, and then
build CSS up again from scratch -
so that each element will appear
the same in all browsers.

The simplest reset involves
removing the margin and padding
from all elements using the
universal selector.

*
{
margin: 0;
padding: 0;
}

However, this reset can
adversely affect some form
elements that should not have
their margins and padding
removed.

More advanced CSS resets aim
to 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 used
CSS resets are:
Eric Meyer Reset
http://meyerweb.com/eric/thoughts/2007/05/0
1/reset-reloaded/

YUI 2: Reset CSS
http://developer.yahoo.com/yui/reset/

Some people love CSS resets,
and others hate them. There is no
right or wrong, only opinions!

I have three main concerns
with CSS resets

Every element that is “zeroed”
must then be redefined. This can
cause an increase in CSS file
size.

CSS Resets can present issues if
you remove the default behaviour
for an element and then forget to
restyle it.

Some resets can be harmful to
users who rely on keyboards for
navigation.

:focus {outline: 0;}

A lighter CSS reset
example

I prefer to use a smaller set of
CSS rules that mean that only
common or problematic
elements are reset.

1. Remove margin and padding
on some key elements only

html, body, ul, ol, li, form,
fieldset, legend
{
margin: 0;
padding: 0;
}

2. Remove top margins on
headings and paragraphs

h1, h2, h3, h4, h5, h6, p
{
margin-top: 0;
}

3. Remove fieldset and image
borders

fieldset, img
{
border: 0;
}

4. Set table borders and
spacing

table
{
border-collapse: collapse;
border-spacing: 0;
}

5. Set caption, table header and
table data cells

caption, th, td
{
text-align: left;
vertical-align: top;
font-weight: normal;
}

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

legend
{
color: #000;
}

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

input, textarea, select
{
font-size: 110%;
line-height: 1.1;
}

8. Remove list bullets

li
{
list-style: none;
}

9. Apply border-bottom and
cursor to abbr and acroynm

abbr, acronym
{
border-bottom: .1em dotted;
cursor: help;
}

10. Vertical-align sup and sub to
avoid line-height issues

sup
{
vertical-align: text-top;
}
sub
{
vertical-align: text-bottom;
}

CSS Reset

More Related Content

What's hot

Viewers also liked

Similar to CSS Reset

More from Russ Weakley

Recently uploaded

CSS Reset