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

CSS Controls: CSS Selectors

• Old Way (Recap):
  • [<td>]<tag><font>content</font></tag>[</td>]
    • <h1><font color="red">Title Text</font></h1>
    • <h1><font color="red">Title Text</font></h1>
• CSS Way:
  • selector { property: value; }
    • h1 { color: red; }
  • Plus some clean HTML
    • <h1>Title Text</h1>
• Element Selectors
  • body { color: #000000; }
  • h1 { margin-top: 5px; }
  • p { padding: 0px; }
  • em { text-transform: uppercase; }
  • a { color: #4d7fb2; }
• Class Selectors
  • <tag class="commonItemType">
    • .commonItemType { color: #0000FF; }
  • <p class="photoCaption">
    • .photoCaption { font-size: .7em; }
  • .navigationLink: <a class="navigationLink">
    • .navigationLink { font-weight: bold; }
• ID Selectors
  • <tag id="uniqueItem">
    • #uniqueItem { margin: 5px; }
  • <div id="primaryNavigation">
    • #primaryNavigation { background-color: #4D7FB2; }