CSS Reset

CSS Reset



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

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



Total Views
Views on SlideShare
Embed Views



33 Embeds 5,644

http://www.zhangxinxu.com 4471
http://desizen.com 366
http://tech.wittaya.net 224
http://www.webstockbox.com 188
http://tomaszlach.com 94
http://ekkalak.posterous.com 77
http://www.maxdesign.com.au 52
http://www.slideshare.net 33
http://www.aarif.be 21
http://www.designcss.org 17
http://techbug.tistory.com 13
http://www.jimzhan.com 13
https://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 11
http://onwebdev.blogspot.com 11
http://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 10
http://designcss.org 9
http://moodle.cerrocoso.edu 6
http://redky.sinaapp.com 5
http://translate.googleusercontent.com 4
http://static.slidesharecdn.com 3
http://cache.baidu.com 2
http://blog.gabrieleromanato.com 2
http://localhost 2
http://www.w3cfuns.com 1
http://indochinahub2.blogspot.com 1
http://posterous.com 1
http://xianguo.com 1
http://www.kaixin001.com 1
http://webcache.googleusercontent.com 1
http://note.sdo.com 1
file:// 1
http://feeds.feedburner.com 1
http://megahtml.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

CSS Reset CSS Reset Presentation Transcript

  • What is 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.
  • Modern CSS resets aim to: • 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/
  • Are CSS resets a good idea?
  • Some people love global 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 use 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; }