A quick presentation on CSS resets and the benefits vs problems. Also includes a lighter CSS reset option.

1. CSS
GLOBAL RESETS

2. What is
CSS reset?

3. All browsers have a
default style sheet.

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

5. 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.

6. The simplest reset involves
removing the margin and padding
from all elements using the
universal selector.
*
{
margin: 0;
padding: 0;
}

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

8. 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

9. 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/

10. Are CSS resets
a good idea?

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

12. I have three main concerns
with CSS resets

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

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

15. Some resets can be harmful to
users who rely on keyboards for
navigation.
:focus {outline: 0;}

16. A lighter CSS reset
example

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

18. 1. Remove margin and padding
on some key elements only
html, body, ul, ol, li, form,
fieldset, legend
{
margin: 0;
padding: 0;
}

19. 2. Remove top margins on
headings and paragraphs
h1, h2, h3, h4, h5, h6, p
{
margin-top: 0;
}

20. 3. Remove fieldset and image
borders
fieldset, img
{
border: 0;
}

21. 4. Set table borders and
spacing
table
{
border-collapse: collapse;
border-spacing: 0;
}

22. 5. Set caption, table header and
table data cells
caption, th, td
{
text-align: left;
vertical-align: top;
font-weight: normal;
}

23. 6. Apply color to fieldset
(to overcome IE color issues)
legend
{
color: #000;
}

24. 7. Apply font-size and line-height
to input, textarea and select
input, textarea, select
{
font-size: 110%;
line-height: 1.1;
}

25. 8. Remove list bullets
li
{
list-style: none;
}

26. 9. Apply border-bottom and
cursor to abbr and acroynm
abbr, acronym
{
border-bottom: .1em dotted;
cursor: help;
}

27. 10. Vertical-align sup and sub to
avoid line-height issues
sup
{
vertical-align: text-top;
}
sub
{
vertical-align: text-bottom;
}