Cascading Style Sheets (CSS)

Monday May 14, GTC West, Class P20

CSS Syntax

selector { property: value; }

Attaching CSS

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

CSS Selectors

tag
.class
#id

CSS Units

em for text
px for rest

Right Column

CSS Design Techniques

  • Mind Set more than Rule Set
    • Efficient (Less is More)
    • Clean (Valid)
    • Use headers!
      • h1, h2, h3
  • Names should follow meaning, not presentation
    • Good: <div id="navigation">
    • Good: <ul class="linkList">
    • Bad: <span class="redTitleText">
  • Standards Compliance and Browser Differences
    • Getting Better
      • IE7 better than IE6 better than IE5
      • Firefox and Safari better yet
    • Inconsistencies to watch out for:
      • margins, padding, widths
  • Doctype Declaration – It Matters!
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/strict.dtd”>
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/transitional.dtd”>
  • Future Proof Code: Best Bet is Valid Code
    • XHTML Validation
    • CSS Validation