Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS 201


Published on

Tools, properties, and bugs you need to know to build websites from scratch with CSS

Published in: Technology
  • Login to see the comments

  • Be the first to like this

CSS 201

  1. 1. CSS 201 Jennifer Berk 12/21/2009
  2. 2. Why CSS 201? • It’s easy to learn the basics, but complex styles can be cryptic • You never know when you’ll need to build something from scratch • And everyone seemed excited when I mentioned the idea!
  3. 3. What’s CSS? • Cascading - more specific or later statements can modify earlier ones • Style - determine the presentation of elements on webpages • Sheets - can be multiple files
  4. 4. What Did CSS Change?
  5. 5. Basic selectors • One-item selector: elementname or .classname or #idname followed by { styles here } • Two-item selector: element-a element-b { styles here } means use those styles for an element-b that is inside an element-a • Doesn’t have to be the direct child
  6. 6. Basic styles • font: italic bold 10px/15px Verdana; • background: #ff0000 url(red-gradient.gif) no-repeat top left; • margin/padding Margin Padding Test • etc.
  7. 7. CSS 201 Agenda • Tools • Resets • Advanced selectors • Quirks mode versus standards mode • Position and Floats • Common browser bugs and hacks
  8. 8. Tools • Firefox • DOM Inspector • Error Console (more for JavaScript) • Web Developer • Firebug • IE Developer Toolbar • Multiple IE
  9. 9. Firefox: DOM Inspector • DOM = Document Object Model (hierarchical tree on the left)
  10. 10. Firefox: DOM Inspector • This view shows what the current style actually is, not what the rules are.
  11. 11. Firefox: Error Console
  12. 12. Firefox: Web Developer
  13. 13. Firefox: Firebug
  14. 14. IE Developer Toolbar
  15. 15. Multiple IE • Lets you install IE6 (and 5.5 and 5, though you really don’t need those anymore) on a system that otherwise runs IE7 • The multiples behave slightly weirdly - don’t expect all JavaScript/Flash to work • Hasn’t been updated to use on a system running IE8
  16. 16. Resets
  17. 17. Advanced selectors • .firstclass.secondclass = something with both firstclass and second class, like <div class=“firstclass secondclass”> • Note #id.classname has bugs, don’t use • firstelement>secondelement = a secondelement that’s a direct child of a firstelement (doesn’t work in IE<7)
  18. 18. “Quirks Mode” vs “Standards Mode” • You want standards mode • Get it by including a DOCTYPE declaration above the <html> tag • You probably want <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xhtml1/DTD/xhtml1-transitional.dtd">
  19. 19. Position property • Static = default, part of regular flow • Fixed = removed from flow; does not scroll • Relative = takes up original space but can be moved; container for absolute position • Absolute = removed from flow, placed using distance from edges (e.g. top: 10px;) of nearest parent with position: relative
  20. 20. Floats • Can have values left, right, none; (to override another rule) • Element floated left allows other content to flow around its right margin; vice versa for element floated right • Can stack series of floated elements next to each other
  21. 21. Common bugs/hacks • IE<7 hack: * html selectors { styles here } • (IE<6) Box model bug • Min-height bug • Float double margin bug • Float containment bug / Holly hack • Peekaboo bug • 3px jog bug
  22. 22. IE <7 hack: * html • To target only IE6 and earlier, add * html to the beginning of your selector • Very important for fixing several of the following bugs • Also useful for debugging, if something is only broken in IE6
  23. 23. (IE<6) Box model bug • Feed IE<6 the modified width using the * html selector hack • IE6 gets it right in standards mode
  24. 24. Min-height bug • IE6 and earlier don’t recognize min-height (or min-width, max-height, max-width) • But they treat height like min-height, so use the * html selector hack to give them that instead
  25. 25. Float double margin bug • An element floated left with a left margin of 10px has a margin of 20px in IE<7 • Same for right-floated with a right margin • Adding display: inline; fixes it
  26. 26. Float containment quirk • Floats hang out of their containing elements in non-IE browsers • If you want the container to surround (e.g. container’s background should continue to bottom of float), add class=“clearfix” to it
  27. 27. Peekaboo bug • Sometimes you see your content, sometimes you don’t, in IE<7, of course • Position: relative; will make the disappearing element be drawn last, so it will be on top of whatever’s intermittently hiding it
  28. 28. 3px jog bug • Next to a float, IE<7 adds an extra 3px of phantom space. The extra space ends when the float does. So you get a sudden 3px jog in the left edge of the paragraph next to the float, for instance. • Read the link for the (fairly complicated) fix. When you can, avoid it by floating one element left and one element right and leaving >3px between them.