1. slides
1.1. http://db.tt/D7TAX6X
2. A deep dive
2.1. 2 topics that are the heart of CSS
3. Selectors
3.1. h1 {...}
3.1.1. h1 - selector
3.1.2. {..} - declaration block
3.2. in the begginning there was only
3.2.1. DOM tree
3.2.1.1. relationships
3.2.1.1.1. ancestors - decendants
3.2.1.1.2. parent - child
3.2.1.2. in reality - it's a complex graph, not a simple tree
3.3. selectors allow you to choose on which elements to work
3.4. 5 types
3.4.1. Specific
3.4.1.1. example
3.4.1.1.1. p
3.4.1.1.2. p.large
3.4.1.1.3. #nav
3.4.1.1.4. *
3.4.1.1.5. intro.large
3.4.2. Hierarchical
3.4.2.1. example
3.4.2.1.1. div p
3.4.2.1.2. div > p
3.4.2.1.3. h1 + p
3.4.2.2. css 3
3.4.2.2.1. div ~ p
3.4.3. Attribute
3.4.3.1. example
3.4.3.1.1. img[alt]
3.4.3.1.2. img[alt="foo"]
3.4.3.1.3. img[alt~="foo"]
3.4.3.1.4. img[alt|="foo"]
3.4.3.2. css 3
3.4.3.2.1. ^=
3.4.3.2.2. $=
3.4.3.2.3. *=
3.4.4. Pseudo-classes
3.4.4.1. like a state
3.4.4.2. example
3.4.4.2.1. :first-child
3.4.4.2.2. :link
3.4.4.2.3. :visited
3.4.4.2.4. :hover
3.4.4.2.5. :active
3.4.4.2.6. :focus
3.4.4.2.7. :lang(foo)
3.4.4.3. actual example
3.4.4.3.1. div>p:first-child
3.4.4.4. css 3
3.4.4.4.1. example
3.4.4.4.2. non work in IE<9
3.4.4.4.3. actual example
3.4.5. Pseudo-elements
3.4.5.1. examples
3.4.5.1.1. :first-line, :first-letter
3.4.5.1.2. :before, :after
3.4.5.2. actual example
3.4.5.2.1. li.optional:before
3.5. Specifity
3.5.1. meaning
3.5.1.1. how "specific" the elements definition
3.5.1.2. you can understand the rules order by logic
3.5.2. law
3.5.2.1. later rules trump earlier rules if their of the same specifity
3.5.2.1.1. see spec
3.5.3. rules of specifity (in this order)
3.5.3.1. style
3.5.3.2. id's
3.5.3.3. attributes, classes, peseudo-classes
3.5.3.4. elements, pseudo-classes
3.5.4. this is translates to number prefixes, in order for the browser to process
3.5.5. Firebug & chrome debugger presents the specifity
3.6. OMG WTF PPK
3.6.1. quirksmode.org/css/contents.html
3.6.2. support of anything in each browser
3.7. performance
3.7.1. Steve Sauders says if you don't have 40K elements, no meaningful overhead in performance
4. The Box Model
4.1. about
4.1.1. doesn't work the way you expect
4.1.1.1. wtf
4.2. wtf 1
4.2.1. width & height apply just to the inner area, not including the padding & border
4.2.2. math
4.2.2.1. size + padding (both sides) + border (both sides) = actual size
4.2.3. more math
4.2.3.1. auto width
4.2.3.1.1. containing block - margin - border - padding = calculated width
4.3. wtf 2
4.3.1. margin collapsing
4.3.1.1. higher size takes over smaller
4.4. read the spec
4.4.1. w3c.org/TR/CSS/box.html