CSS Reset
-
Upload
russ-weakley -
Category
Technology
-
view
116 -
download
4
description
Transcript of 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