style

a.k.a. CSS


css

Cascading Style Sheets


html

For Structure

css

For Presentation


cs s

Style


css

sheets


c ss

cascading


cas•cade

noun

  • a small waterfall, typically one of several that fall in stages down a steep rocky slope.
  • a process whereby something, typically information or knowledge, is successively passed on.


cas•cade

verb

  • (of water) pour downward rapidly and in large quantities.
  • arrange (a number of devices or objects) in a series or sequence.


cas•cade

summary

  • The more specific the style....
  • The lower it is in the cascade....
  • The more likely it is to override


your first style


p { color: red; }


woah

What's all that stuff?


p { color: red; }


  • Selector


p { color: red; }


  • Declaration


P { COLOR: RED; }


  • Statement


P { COLOR: RED; }


  • Property


P { COLOR: RED; }


  • Value

repeat after me

P { COLOR: RED; }

  • Select something
  • Start declaration
  • Start statement
  • Choose a property
  • Assign a value
  • End statement
  • End declaration


{ }

Curly brackets enclose the declaration (i.e. <>)

:

Colon separates property from value (i.e. =)

;

Semi-colon ends the statement (i.e. "")


let's write one together


with this style
we shall:

  • Select a Level-1 Heading
  • Make it Green


select level-1 heading

<h1>


make it green

  • What property is that?
  • Can I just use 'green' for the value?


h1 { color: green; }


How'd you do?


do it again

This time make Level-1 headings Blue


you should have this

h1 { color: green; }

h1 { color: blue; }


what color is your level-1 heading?

Best guess? Green? Blue?


it's blue

But why?


c ss

Cascade

  • The more specific the style....
  • The lower it is in the cascade....
  • The more likely it is to override


    • so....

    • Specificity = same
    • Blue declaration = lower
    • Blue wins


    that's all there
    is to it

    Well, that's not necessarily true...
    Made with Slides.com