fes Logo

CSS

Applying style and layout

Simple Selectors

  • element type
  • class
  • id

Attribute Selectors

  • [attr]


link

Pseudo Selectors

  • :


link

Combinators / Multiple Selectors

  • , + > ~


link

CSS Diner

Lets try it out!

Units / Values

  • numbers
  • percentages
  • colors
  • functions

Numeric - Absolute vs Relative

  • absolute = fixed (px)
  • relative = changes (em, rm, vh, vw)

Percentages

  • %

Colors

  • names and hex

Cascade / Inheritence

        html{ color:pink; }
        body { color: purple; }
        .blue { color: blue; }
        .red { color: red; }

        < div class="red blue"> text

what color is text?

Cascade

  • importance
  • specifity
  • order

Inheritence

  • Parent / Child

Box Model

  • Margin, Border, Padding

Debugging / Developing

  • Chrome Browser Tools

Browser Defaults

  • Normalize and Reset

Questions?