CSS

An introduction, refresher, and help chat

Dan Fitch

Things I'm about to talk about pretty fast

  • What is CSS?
  • Realtime editing
  • Why is it called "cascading"?
  • Box model
  • Flexbox
  • Quick demos of pure CSS animations and transitions
  • Q&A

Please feel free to interrupt AND/OR tell me to slow down.

What is CSS?

Whirlwind intro

  • Cascading style sheets
  • Separation of style and content
  • Reusable, central styling for web pages
the magic button

F12

Editing CSS

  • Realtime changes
  • See how things work!
  • GREEN
  • Increment/decrement with alt/shift
  • Forcing element state for :hover, etc.
    • Pin in Styles tab
    • Right click element

Cascade???

Inheritance, direct and otherwise

Inheritance

  • Normal inheritance
    • Below
      • beloooow
  • Direct inheritance
    • Echo
      • echooooo

Box model

The default mode: boxes

  • Size
  • Padding
  • Margins
  • See it easily by inspecting

Block Example

Before
Block div
Block span After

Inline Example

Before
Inline div
Inline span After

Inline Block Example

Before
Inline-block 1
Inline-block 2
Inline-block TALL
Inline-block 3
Inline-block 4
After

Flexbox

Flexbox example

  • flex-direction
  • flex-wrap
  • justify-content
  • align-items
flex item 1
flex item 2
flex item 3
flex item 4
flex item 5
flex item 6
flex item 7
flex item 8
flex item 9
flex item 10

CSS animations

  • Transforms
  • Applying and removing classes via JS

THE END

(or, Q&A)

Let's share more knowledge, yo!