Implementing a Website in Cascading Style Sheets (CSS)

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 Review

• Syntax
  • selector { property: value; }
    • h1 { color: red; }
  • Selector Types
    • HTML Tag
      • <p>some text</p>
      • p { font-family: arial }
    • Class
      • <a class="topNavLink" href="index.html">Home</a>
      • .topNavLink { font-weight: bold; }
    • ID
      • <div id="navigationBar">Nav Bar Content Here</div>
      • #navigationBar { background-color: #797A7B; }
    • Psuedo
      • :link, :visited, :active, :focus, :hover
  • Selector Combinations
    • #heading, #navigation
    • .cleaner
    • ul ul
    • #heading img
    • #heading, #navigation
    • form > #radio_container
    • navigation li:hover a
  • Rule Combinations
    • h1 { color: #4D7FB2; font-family: arial; background: #FFFFFF; margin: 10px; }
• The Cascade
  • Containment of HTML
  • 'Closer' rules win
  • CSS Cascade (from Day 1)

See Also Yesterday's Presentation