1. Style Sheet Building Blocks Chapter 7 & 8 4/8/08 Spring 2008

2. Styles & Style Sheets • A style sheet is a text file containing one or more rules that determine (using properties and rules) how certain elements in your web page should be displayed. • We will use version CSS 2 • Styles can be created outside the Web pages and then applied to all pages at once. Spring 2008

3. Style rules • Selector Declaration • Selector – the element that you wish to format • Declaration – one or more property/value pairs h1 { color:red; } Img {border: 4px solid red} h1 { color: red; background: yellow;} Spring 2008

4. Style Rule Comments • /* - begins a comment in a style sheet • */ - Ends a comment in style sheet • WHY? • Remember what style rules do • Help debug style sheets • Can span several lines Spring 2008

5. “cascading” • Every browser has its own default style rules • Can write and apply style rules to a specific XHTML element in the code • Insert them at the top of an XHTML doc • Import one or more from an external file • Some style rules are inherited from parent to child Spring 2008

6. Principle of the cascade • Inheritance – some properties are inherited. See p122, Figs 7.5-7 em element inherits font, weight, and color from parent, P element. • Specificity – the more specific the selector, the stronger the rule. Fig 7.8 shows four rules. Fig 7.9 shows application of the rules. • If specificity is not enough, use location Spring 2008

7. Property’s value • Inherit • Predefined – not in quotationmarks • Lengths and percentages – must have a quantity and a unit e.g. 3em or 10px • relative – em equal to font size; px relative to resolutionof the monitor • absolute – self-explanatory in, cm, mm, … • percentage • colors – percent of red, green, blue Spring 2008

8. External style sheet • Use a text editor (e.g. MS notepad) to create your style sheet. • define the style rules • save as text-only format with extension .css • must be either linked or imported • if it contains non-ASCII chars, @charset “encoding” Spring 2008

9. Using styles • Link an external style sheet • in each XHTML page, put <link rel=“stylesheet” type=“text/css” href =“url.css” /> • offer alternate style sheets using title=“label” • create an internal style sheet <style type=“text/css”> </style> • import external style sheets using @import “external.css”; or @import url(external.css) or @import url(“external.css”); • Can designate media-specific style sheets with media=“output” where output types can be: all, aural, braille, embossed, handheld, print, proejction, screen, tty and tv Spring 2008

10. Apply style locally • embed the style=“ … “ in the element tag • See p134 Fig18-19 • Location of the style rules is very important in defining which rules apply. Spring 2008