CSS in 11 slides.

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; }

Cascading Style SheetsHTML

Body

Class or ID

Child / Parent

In-line

Reset CSS *{…}

Document-wide Style (DRY): body { font-size: 12px }

Most common type you’ll see/write

Close second; hardest to track down.

BAD.

.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();

Real-world Example

Helpful Hints

Open Source is Your FriendFirebug or Cmd+alt+I

Margin vs. Padding(both increase the size of the box!!)

Negative margin is bad.

Tools (cont.)

Block ModelBlock 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.

““

Always Float: Leftor :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

The Internet Wants to Help

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

(sort of)

One more thing…

Windows Sucks

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