by Ted Nielsen

1. CSS in 11 slides.

2. Good Type of Waterfall CSS uses the DOM <div id=“site”> <h2>Big Header</h2> <div class=“post”> <h2>Title</h2> <p>Text text text</p> </div> <div class=“post”> <h2>Title</h2> <p>Text text text</p> </div> <div class=“post”>…</div> </div> h2{ font-weight: normal; color: green; } .post h2{ color: blue; } .site p { color: red; } div > p:first-child { color: purple; }

3. Cascading Style Sheets Reset CSS *{…} Document-wide Style (DRY): body { font-size: 12px } Most common type you’ll see/write Close second; hardest to track down. BAD.

4. .class vs. #id Same syntax (selectors, pseudo-classes, properties) a#fb { background: url(img/18px_sprites.png) no-repeat -17px left; margin-right: 7px; } .carouselImage{ z-index:0; left:40px; position:relative; color:blue;} #id{}’s are unique to a page; singletons .classes come in groups (or at least can.) Why care? $(‘#fb’).fadeOut();

5. Real-world Example

6. Helpful Hints Open Source is Your Friend Firebug or Cmd+alt+I Margin vs. Padding (both increase the size of the box!!) Negative margin is bad.

7. Tools (cont.)

8. Block Model Block vis-à-vis in-line elements Block: <div>, <h#>, <table>, <form>, <(o|u)l> In-line: <img>, <a>, <i>, <b>, <u>, etc. You can redeclare as ….{ display: block; } :table-cell, etc.

9. “ “ Always Float: Left or :right, but never both Elements are floated horizontally; this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. --W3C Schools

10. The Internet Wants to Help (sort of) http://css-tricks.com/ http://net.tutsplus.com/ http://stackoverflow.com/ http://smashingmagazine.com/ http://unmatchedstyle.com/ http://www.w3schools.com/Css/default.asp http://lmgtfy.com/?q=background+image+css

11. One more thing…

12. Windows Sucks http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs