Cascading Style Sheets (CSS)

Monday May 14, GTC West, Class P20

CSS Cascade

Rules effect things below them:
<body> rules effect <p>

When Rules Fight...

  • Closer is stronger
  • #id is stronger than .class is stronger than tag
  • Last rule wins

More CSS Syntax

  • /* comment */
  • ',' means 'and'
  • ' ' means 'descendent'
  • '*' means 'everything'
  • '>' means 'child'
  • '+' means 'sibling'
  • :link, :visited
  • :hover, :focus, :active

Right Column

CSS Cascade: Group Exercises

  • Back to Groups (4 or 5 people)
  • Write plain-english explanations of what is being effected:
    • #heading, #navigation, #main_content_1, #footer
    • #heading img
    • #heading #search_container
    • #heading form input
    • #heading #control .radiobutton
    • form > #radio_container
    • #navigation a:hover
    • #navigation li:hover a, #navigation li.mouse_over a
    • #navigation li.nav_default_on a span, #navigation li.nav_default_off a span
    • #navigation li.nav_default_off ul
    • #footer div span
    • ul ul
    • #middle_column li ul li
    • .cleaner
  • All of these are rules in the CA Template
  • I'll work around and answer questions
  • When complete, trade with another group for grading