Download - CSS Reset
![Page 1: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/1.jpg)
CSSGLOBAL RESETS
![Page 2: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/2.jpg)
What isCSS reset?
![Page 3: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/3.jpg)
All browsers have adefault style sheet.
![Page 4: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/4.jpg)
The problem is that these defaultstyle sheets are different in each
browser.
![Page 5: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/5.jpg)
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.
![Page 6: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/6.jpg)
The simplest reset involvesremoving the margin and padding
from all elements using theuniversal selector.
*{
margin: 0;padding: 0;
}
![Page 7: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/7.jpg)
However, this reset canadversely affect some form
elements that should not havetheir margins and padding
removed.
![Page 8: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/8.jpg)
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
![Page 9: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/9.jpg)
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/
![Page 10: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/10.jpg)
Are CSS resetsa good idea?
![Page 11: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/11.jpg)
Some people love CSS resets,and others hate them. There is no
right or wrong, only opinions!
![Page 12: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/12.jpg)
I have three main concernswith CSS resets
![Page 13: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/13.jpg)
Every element that is “zeroed”must then be redefined. This can
cause an increase in CSS filesize.
![Page 14: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/14.jpg)
CSS Resets can present issues ifyou remove the default behaviourfor an element and then forget to
restyle it.
![Page 15: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/15.jpg)
Some resets can be harmful tousers who rely on keyboards for
navigation.
:focus {outline: 0;}
![Page 16: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/16.jpg)
A lighter CSS resetexample
![Page 17: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/17.jpg)
I prefer to use a smaller set ofCSS rules that mean that only
common or problematicelements are reset.
![Page 18: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/18.jpg)
html, body, ul, ol, li, form,fieldset, legend{
margin: 0;padding: 0;
}
1. Remove margin and paddingon some key elements only
![Page 19: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/19.jpg)
h1, h2, h3, h4, h5, h6, p{
margin-top: 0;}
2. Remove top margins onheadings and paragraphs
![Page 20: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/20.jpg)
fieldset, img{
border: 0;}
3. Remove fieldset and imageborders
![Page 21: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/21.jpg)
table{
border-collapse: collapse;border-spacing: 0;
}
4. Set table borders andspacing
![Page 22: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/22.jpg)
caption, th, td{
text-align: left;vertical-align: top;font-weight: normal;
}
5. Set caption, table header andtable data cells
![Page 23: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/23.jpg)
legend{
color: #000;}
6. Apply color to fieldset(to overcome IE color issues)
![Page 24: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/24.jpg)
input, textarea, select{
font-size: 110%;line-height: 1.1;
}
7. Apply font-size and line-heightto input, textarea and select
![Page 25: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/25.jpg)
li{
list-style: none;}
8. Remove list bullets
![Page 26: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/26.jpg)
abbr, acronym{
border-bottom: .1em dotted;cursor: help;
}
9. Apply border-bottom andcursor to abbr and acroynm
![Page 27: CSS Reset](https://reader034.vdocuments.mx/reader034/viewer/2022042623/54c7fb754a79597a558b4569/html5/thumbnails/27.jpg)
sup{
vertical-align: text-top;}
sub{
vertical-align: text-bottom;}
10. Vertical-align sup and sub toavoid line-height issues