Implementing a Website in Cascading Style Sheets (CSS)

Attaching CSS

<style>
@import url('styles.css');
</style>

CSS Selectors

tag
.class
#id

CSS Units

em for text
px for rest

Right Column

Why Use CSS?

• Management Strategy
  • Separate Content from Presentation
  • Update quickly
    • Make visual changes throughout a page in seconds
    • Make visual changes throughout a site in seconds
    • Example: This Presentation
  • Removes time-consuming, error-ridden processes
  • Relevant to both static and dynamic (e.g. CMS) sites
• Templating Strategy
  • Consistency across many pages, agencies with minimal work
  • Flexibility to change, tweak, adjust
• Accessibility Tool
  • ADA Section 508
  • California Policy
  • Search Engines
  • Small-screen devices
  • People and inventions of the future
• Usability Tool
  • Allows for rapid changes in response to testing
  • New CSS templates are Part of California Usability Standards adopted July 14, 2006
• Presentational Power
  • Controls things HTML can't - e.g. <h1> margins
  • This presentation (CSS off, on)
• Speed
  • One (or several) files, downloaded once
  • Less to download across a site visit
  • HTML is cleaner, shorter, sweeter
• YAL: Yet Another Language (sigh)
  • The only real downside
  • Different than HTML, JavaScript, SQL, NET, Java, PHP, C#, etc....
  • CSS:
    • selector { property: value; }
    • h1 { color: red; }