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

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.

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;}

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

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

Slide 6 CMPS 211 Internet Programming Spring 2008 Principle of the cascade Inheritance – some properties are inherited. See p122, Figs em element inherits font, weight, and color from parent, P element.Figs 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

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

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

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 “external.css”; url(external.css) 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

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.