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

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

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

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!

Calling and Referencing 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) 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”>

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

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

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

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

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