1. Slide 1 CMPS 211 Internet Programming Spring 2008 Style Sheet Building Blocks Chapter 7 & 8 4/8/08

2. Slide 2 CMPS 211 Internet Programming Spring 2008 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.

3. Slide 3 CMPS 211 Internet Programming Spring 2008 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;}

4. Slide 4 CMPS 211 Internet Programming Spring 2008 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

5. Slide 5 CMPS 211 Internet Programming Spring 2008 “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

6. Slide 6 CMPS 211 Internet Programming Spring 2008 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.Figs 7.5-7 Specificity – the more specific the selector, the stronger the rule. Fig 7.8 shows four rules. Fig 7.9 shows application of the rules.Fig 7.8 Fig 7.9 If specificity is not enough, use location

7. Slide 7 CMPS 211 Internet Programming Spring 2008 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

8. Slide 8 CMPS 211 Internet Programming Spring 2008 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”

9. Slide 9 CMPS 211 Internet Programming Spring 2008 Using styles Link an external style sheet –in each XHTML page, put –offer alternate style sheets using title=“label” create an internal style sheet 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

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