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 Controls: Adding CSS to a Web Page

  • External file
    • Can be shared across multiple pages
      • Sharing is crucial to take advantage of real power
    • Most useful, our focus
    • <link rel="stylesheet" href="styles.css" type="text/css" media="all" >
      • Works great
    • @import url('styles.css') all;
      • Used in <style> tag (in <head>):
        <style> @import url('styles.css') all; </style>
      • Can also import other style sheets
      • Preferred
      • Used in CA Templates
  • Embedded
    • For inconsistencies...
      • which are bad...
    • Also used in <style> tag:
      <style> h1 { color: #FF0000; } </style>
    • Use carefully, avoid if possible
  • Inline
    • <h1 style="color:#FF0000">Title</h1>
    • Same power, but loose all other advantages
    • 'Classic' HTML pitfall
      • Inconsistent
      • Lengthy
      • Not fun to maintain or update
    • To be avoided