Cascading Style Sheets (CSS)

Look Familiar?

You may note some similarities between this presentation and the California State Template.

Go ahead - deconstruct it - the source is open for you to view!

Right Column

CSS: Speed

• Share your presentational instructions accross a website
  • One (or several) files, downloaded once
  • Less to download accross a site visit
• HTML is cleaner, shorter, sweeter
  • <h1>Site Title</h1>
    
    vs.
    
    
  • <p><font face="Arial, Helvetica, sans-serif" size="6" color="#FF3366">Site Title </font></p>
    
    or
    
    
  • <div id="header">Logo</div>
    <div id="nav>Nav</div>
    <div id="content">Content</div>
    <div id=footer">Footer</div>
    
    vs.
    
    
  • <table width="200" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="2">Logo</td>
        </tr>
        <tr>
            <td valign="top" >Nav</td>
            <td valign="top" >Content</td>
        </tr>
        <tr>
            <td colspan="2">Footer</td>
        </tr>
        <tr>
            <td><img src="images/spacer.gif" width="200" height="1" alt="Remember These?" /></td>
            <td><img src="images/spacer.gif" width="560" height="1" alt="So fun!" /></td>
        </tr>
    </table>