Cascading Style Sheets

1. Cascading Style Sheets

2. 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

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” 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”>

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

9. Styles and App Design • 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. 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

11. 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)

12. 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}

13. How do wewant 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

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

15. 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?

16. CSS Beyond the Screen • Making a printable Web page <link href=“screen.css” rel=“stylesheet” type=“text/css” media=“screen”> <link href=“print.css” rel=“stylesheet” type=“text/css” media=“print”> • 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

17. 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<“ attr(href) “>”; } • See p 169

18. 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

19. CSS for Mobiles • Another simple application of styles for specific devices • Not all mobiles are created equal • <link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" /> • Mobile CSS first steps • CSS Mobile Profile 2.0 • Mobile Profile and CSS

20. Projects • Design Project (design & managing) • Review & analyze comparable Web sites • Plan project work & associated project deliverables and timelines • Use a methodology as a process framework • Design Web pages per user stories. • Build lightweight prototypes • Main Project (building & testing) • Prototyping site structures • Creating user stories • Building navigation systems • Architecting lightweight information taxonomies • Functionality testing • Consulting