CSS - crash course in Selectors, box model, Idan Gazit

Get Started. It's Free
or sign up with your email address
Rocket clouds
CSS - crash course in Selectors, box model, Idan Gazit by Mind Map: CSS - crash course in Selectors, box model, Idan Gazit

1. A deep dive

1.1. 2 topics that are the heart of CSS

2. Selectors

2.1. h1 {...}

2.1.1. h1 - selector

2.1.2. {..} - declaration block

2.2. in the begginning there was only

2.2.1. DOM tree relationships ancestors - decendants parent - child in reality - it's a complex graph, not a simple tree

2.3. selectors allow you to choose on which elements to work

2.4. 5 types

2.4.1. Specific example p p.large #nav * intro.large

2.4.2. Hierarchical example div p div > p h1 + p css 3 div ~ p

2.4.3. Attribute example img[alt] img[alt="foo"] img[alt~="foo"] img[alt|="foo"] css 3 ^= $= *=

2.4.4. Pseudo-classes like a state example :first-child :link :visited :hover :active :focus :lang(foo) actual example div>p:first-child css 3 example non work in IE<9 actual example

2.4.5. Pseudo-elements examples :first-line, :first-letter :before, :after actual example li.optional:before

2.5. Specifity

2.5.1. meaning how "specific" the elements definition you can understand the rules order by logic

2.5.2. law later rules trump earlier rules if their of the same specifity see spec

2.5.3. rules of specifity (in this order) style id's attributes, classes, peseudo-classes elements, pseudo-classes

2.5.4. this is translates to number prefixes, in order for the browser to process

2.5.5. Firebug & chrome debugger presents the specifity


2.6.1. quirksmode.org/css/contents.html

2.6.2. support of anything in each browser

2.7. performance

2.7.1. Steve Sauders says if you don't have 40K elements, no meaningful overhead in performance

3. The Box Model

3.1. about

3.1.1. doesn't work the way you expect wtf

3.2. wtf 1

3.2.1. width & height apply just to the inner area, not including the padding & border

3.2.2. math size + padding (both sides) + border (both sides) = actual size

3.2.3. more math auto width containing block - margin - border - padding = calculated width

3.3. wtf 2

3.3.1. margin collapsing higher size takes over smaller

3.4. read the spec

3.4.1. w3c.org/TR/CSS/box.html

4. slides

4.1. http://db.tt/D7TAX6X