Cascading Stylesheets

CSS is awesome: https://repl.it/GY4b

 CSS garden: http://www.csszengarden.com/

CSS puns: http://saijogeorge.com/css-puns/

CSS is awesome!

• http://codepen.io/WithAnEs/full/Fxzei
• http://codepen.io/mgitch/full/pECcD/
• http://codepen.io/mariosmaselli/full/ghmwq
• http://codepen.io/judag/full/zxKVQR
• http://codepen.io/CharlesSmart/pen/gbdaOa
• http://codepen.io/yy/pen/YPjEZw
• http://codepen.io/thisisroger/pen/mskhL

Including CSS in HTML

Including CSS

Inline: https://repl.it/GWO0/1

Including CSS

Inline:

• slow down dev process

• quick changes => debugging

• email templates

• large HTML file

https://repl.it/GWOt

Including CSS

Embedded CSS:

• large HTML file

• imessy code

• quick fixes

https://repl.it/GV06/1

Including CSS

External CSS (most used one):

1. browser cache
2. minification
3. separating HTML, CSS and JS => easier to read the code, easier to develop
4.  reusing same style on multiple subpages

https://repl.it/GUns

Including CSS

Inline: https://repl.it/GWOt

Embedded: https://repl.it/GWPM/1

External: https://repl.it/GWSM

Same code in three ways. Which one is the best? 

Including CSS

External: https://repl.it/GWT7/2

Embedded: https://repl.it/GWT3/2

Inline: https://repl.it/GWTO/2

Same code in three ways. Which one is going to overwrite the others? 

Including CSS

Exercise 1: https://repl.it/GWWf/1

Including CSS

Exercise 2: https://repl.it/GWZq/1

CSS selectors

CSS selectors

Syntax: https://repl.it/GUUe/2

CSS selectors

Type selectors: https://repl.it/GW9i/1

CSS selectors

Type selectors 2: https://repl.it/GWi2/0

CSS selectors

Class selector: https://repl.it/G0Xf

CSS selectors

Multiple classes: https://repl.it/G0Xz

CSS selectors

ID selector: https://repl.it/GcIY

CSS selectors

ID selector: https://repl.it/GJTK/1

CSS selectors

ID or class?

Two IDs with the same style: https://repl.it/GWmr

Applying class with same style to multiple elements: https://repl.it/GWnR

CSS selectors

Attribute selector:

https://repl.it/GWr1/1

CSS selectors

Child selector:

https://repl.it/GXJF

CSS selectors

Descendant selector:

https://repl.it/GYTx

CSS selectors

Sibling selector:

https://repl.it/GYV3/1

CSS selectors

Sibling selectors must have same parent:

https://repl.it/GY0O/0

CSS selectors

Sibling selectors must have same parent:

https://repl.it/GY0O/0

CSS cascade

CSS cascade

Order of the CSS rules matter!

CSS cascade

1. importance:

https://repl.it/G0Tl

CSS cascade

2. specificity

ID always wins!

https://repl.it/G0VG

CSS cascade

2. specificity

ID beats class!

https://repl.it/G0V3

CSS cascade

2. specificity

ID beats class!

https://repl.it/G0V3

CSS cascade

2. specificity

ID beats everything!

https://repl.it/G0Vu

CSS cascade

2. specificity

ID beats everything, but important!

https://repl.it/G0WC

CSS cascade

2. specificity

Multiple classes:

https://repl.it/G0WT/1

CSS cascade

2. specificity

Descendant selectors:

https://repl.it/GXLt/1​

CSS cascade

3. Source order

https://repl.it/G0Wt

CSS cascade

4. Exercise:

https://repl.it/G00O​