1. Cascading Style Sheets 2
Schmitt, C. (2002). Designing CSS Web Pages: Chapters 3-5
Zeldman, J. (2003). Designing With Web Standards: Chapter 16
Project Plan
User Stories
Templates
Presentations
Alumni Committee Visit
Presentation
Development work

2. Setting Up Styles Examine existing style sheets (if any)
Look at page(s) with & without styles
Types of style selectors:
Generic - HTML
Descendants - associated elements
Child - inherited
Adjacent Sibling - similar, but specific
Universal - all elements
Class- “class” attribute
ID - “if” attribute
You can see a lot of this here -

3. iSchool.css
.nav { color: #6699CC; font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-decoration: none}
.nav:hover { color: #FF9933; font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-decoration: underline}
.nav_selected { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #FF9933; font-size: 12px; text-decoration: none}
.external_link { font-style: italic }
h1 { font-size: 20px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; color: #FF9933}
h2 { font-size: 16px; font-family: Arial, Helvetica, sans-serif; font-weight: normal}
h3 { font-size: 14px; font-family: Arial, Helvetica, sans-serif; font-weight: bold}
h3 { font-family: Arial, Helvetica, sans-serif; font-weight: bold}
a { color: #6699CC }
a:hover { color: #FF9933 }
.external { font-style: italic }
td { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333}
th { font-family: Arial, Helvetica, sans-serif; font-size: 12px}
p { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333}
body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333}
.page_title { font-size: 22px; color: #FF9933; font-family: Arial, Helvetica, sans-serif}
.title {font-size: 22px; color: #6699CC; font-family: Arial, Helvetica, sans-serif; text-decoration: none}
.title:hover {font-size: 22px; color: #FF9933; font-family: Arial, Helvetica, sans-serif; text-decoration: none}
ul { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: # }
ol { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: # }
li { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333}

4. Calling and Referencing CSS
iSchool
<link rel="stylesheet" href="/ischool.css" type="text/css">
<link rel=“StyleSheet” href=“/styles/style1.css” type=“text/css” media=“all” />
<style type=“text/css” media=“all”> @import url(“/styles/style1.css”);</style>
@import only works in 5.0+ browsers: useful for customizing for newer browsers
You could link to styles on other sites (url)

5. How do we want to cascade?
Multiple css?
Per page type?
How many columns?
What design style?
No tables at all?
Printing for reference vs. viewing online
Validating styles and markup

6. CSS Tools
CSS Edit
Dreamweaver
StyleMaster (Win & Mac)
Text editors

7. Dynamic HTML What interactivity do we need?
Marking sites, ecommerce sites vs. informational sites
Integrating JavaScript into the design
Menus
Forms
Sorting course listings
Site Maps
What Else?