CSS 201


Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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" "http://www.w3.org/TR/ 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 http://en.wikipedia.org/wiki/CSS_filter#Star_HTML_hack
  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 http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/
  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 http://www.positioniseverything.net/explorer/doubled-margin.html
  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 http://www.positioniseverything.net/easyclearing.html http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/
  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 http://www.positioniseverything.net/explorer/peekaboo.html
  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. http://www.positioniseverything.net/explorer/threepxtest.html