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

  • Containment of XHTML
    <html>
        <head>
           <title>Title Contents</title>
       </head>
       <body>
          <div>
             <h1>Title</h1>
             <p>Paragraph with <em>italicized text</em></p>
          </div>
          <img src=”photo.jpg” />
    ...
       </body>
    </html>
  • Cascade of rules
    • <body> rule effects <h1>
    • <p> rule effects <em>
    • etc...