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

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 - http://www.newmanic.com/css-overview.asp

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: #333333 } ol { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333 } li { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333}

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)

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

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

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?