1. Cascading Style Sheets
Zeldman, J. (2003). Designing With Web Standards: Chapters 9-10
Schmitt, C. (2002).Designing CSS Web Pages: Chapters 1-2
Presentations
Project Plan
User Stories
Templates

2. CSS Pros Separates content from presentation
Global presentation changes from one file
Conserves bandwidth
Simpler code is easier to update
Increasingly browser friendly
Better accessibility
Cures the common cold
Great on sandwiches

3. CSS Anatomy Selector p Declaration {color: yellow;}
Property: Value
Multiple declarations {color: yellow; background: transparent;}
Grouped Selectors p, li {color: yellow}
Inherited Properties body {font-family: sans-serif}
Override inheritance with specific property
Contextual: can override coding in content

4. Object Identifiers
Use as a “style” for content when content is identified with that id
Make an element id “mainpoint”
#mainpoint p {font-style: strong; text-align: center; margin-bottom: 1em;}
Use the element id
<p class =“majorpoint”>This will be on the test.</p>
Use in combination with Contextual Selectors to manipulate presentation in combinations
It’s like using programming logic!

5. Calling and Referencing CSS
<link rel=“StyleSheet” href=“/styles/style1.css” type=“text/css” media=“all” />
<style type=“text/css” 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)
Embedding styles in a document not recommended
Less flexibility
More coding (there’s always another page or another version of the same page)
Inline styles in the tag <h2 style=“color: blue”>

6. CSS Flexibility Different style sheets for different uses
Browsing
Versions and platforms
Printing
8.5 x 11
PDA-sized with text breaks
Searching ?
Highlighting query term
Abstracted elements from document – “id=abstract”
Relative style file locations might be used for advanced style logic

7. Document Styles – Body Tags
Margins
spacing (padding)
Indenting
colors (backgrounds and text)
Images
Fonts
Line height (double-spaced Web papers)
Headers
Footers
What else?

8. Page Divisions Content Divs Sidebars (Columns) Navigation (and Site)
Tabs
Link sets
Rollovers
“You are Here” effect
a:visited
Colors
Graphics

9. Styles and XIA Content should match style
Users (their browsers) should be able to perform all user stories (tests)
Applications may use styles differently than pages with just text
Forms
Styling for Navigation – Menus
See Designing CSS Web Pages
Code Samples
Web Resources
DOCTYPES
Templates for different styles of documents

10. Next Week More CSS Web version of Research Papers Due
Use good development standards
Research:
Academic
Technical
Theoretical sources