Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,078
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
12
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CSS 201 Jennifer Berk 12/21/2009
  • 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. 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. What Did CSS Change?
  • 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. 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. CSS 201 Agenda • Tools • Resets • Advanced selectors • Quirks mode versus standards mode • Position and Floats • Common browser bugs and hacks
  • 8. Tools • Firefox • DOM Inspector • Error Console (more for JavaScript) • Web Developer • Firebug • IE Developer Toolbar • Multiple IE
  • 9. Firefox: DOM Inspector • DOM = Document Object Model (hierarchical tree on the left)
  • 10. Firefox: DOM Inspector • This view shows what the current style actually is, not what the rules are.
  • 11. Firefox: Error Console
  • 12. Firefox: Web Developer
  • 13. Firefox: Firebug
  • 14. IE Developer Toolbar
  • 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. Resets
  • 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. “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. 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. 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. 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. 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. (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. 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. 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. 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. 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. 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