• Share
  • Email
  • Embed
  • Like
  • Private Content
CSS Reset
 

CSS Reset

on

  • 12,480 views

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.

Statistics

Views

Total Views
12,480
Views on SlideShare
7,234
Embed Views
5,246

Actions

Likes
20
Downloads
336
Comments
3

33 Embeds 5,246

http://www.zhangxinxu.com 4077
http://desizen.com 366
http://tech.wittaya.net 224
http://www.webstockbox.com 186
http://tomaszlach.com 94
http://ekkalak.posterous.com 77
http://www.maxdesign.com.au 50
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
More...

Accessibility

Categories

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.

Cancel

13 of 3 previous next Post a comment

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

    CSS Reset CSS Reset Presentation Transcript

    • CSS GLOBAL RESETS
    • 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; }