Cascading Style SheetsCSS BenefitsCSS AnatomyObject IdentifiersCalling and Referencing CSSCSS FlexibilityDocument Styles – Body TagsPage DivisionsStyles and App DesignSetting Up StylesSlide 11iSchool.cssHow do we want to cascade?CSS ToolsDynamic HTMLCSS Beyond the ScreenPrinting with linksProofing CSSCSS for MobilesProjectsCascading Style SheetsCascading Style SheetsCSS BenefitsCSS 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 sandwichesCSS AnatomyCSS 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 contentObject IdentifiersObject 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 CSSCalling 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 FlexibilityCSS 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 logicDocument Styles – Body TagsDocument Styles – Body Tags-Margins-spacing (padding)-Indenting-colors (backgrounds and text)-Images-Fonts-Line height (double-spaced Web papers)-Headers-Footers-What else?Page DivisionsPage Divisions•Content Divs•Sidebars (Columns)•Navigation (and Site)-Bars-Tabs-Link sets-Rollovers•“You are Here” effect-a:visited-Colors-GraphicsStyles and App DesignStyles 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 documentsSetting 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” attributeCalling 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)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}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 markupCSS Tools•CSS Edit•Dreamweaver•StyleMaster (Win & Mac)•Text editorsDynamic 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?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 printingPrinting with links•A { color:#000; (this is