Cascading Style Sheets Primary readings Presentations Explain & review projects with class mates

CSS Benefits 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 - This will be on the test. Use in combination with Contextual Selectors to manipulate presentation in combinations It’s like using programming logic!

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

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) - Bars - Tabs - Link sets - Rollovers “You are Here” effect - a:visited - Colors - Graphics

Styles 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 PagesDesigning CSS Web Pages - Code Samples Code Samples - Web Resources Web Resources DOCTYPES Templates for different styles of documents

CSS Beyond the Screen Making a printable Web page - Set each type of style (there are others too) to use the elements that are appropriate for each Footers, navigation, sidebars, breadcrumbs - Change text characteristics to suit Font style, font size, italics/underlines Make headings more unique in print Margins for reading vs. ease of printing

Printing with links A { color:#000; (this is black) Font-weight: bold; Text-decoration: none;} #content p a:after,.info ul li a:after {content: “a ”; } See p 169

Proofing CSS Not all CSS features work perfectly on all browsers - Ensure compatibility with IE 6.x & Mozilla 1.x or Firefox 1.x - Verify with alternate font sets (internationalization issues) 508 compliance with CSS too - Use true headings and formatting, not styles - Use “alt” or “longdesc” for elements - Use good naming conventions Not “red” for required fields or “go” for input buttons - Keep form fields in order

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

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}

Calling and Referencing CSS iSchool only works in 5.0+ browsers: useful for customizing for newer browsers You could link to styles on other sites (url)

How do you 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 (Macintosh)CSS Edit TopStyle Pro (Windows)TopStyle Pro Dreamweaver (both)Dreamweaver StyleMaster (both)StyleMaster Text editors

Projects Review & Explanation Take 10 minutes to explain your project Show them your designs - Designs should be Web accessable by now