1 / 10

Style Sheet Building Blocks

Style Sheet Building Blocks. Chapter 7 & 8 4/8/08. 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

ophira
Download Presentation

Style Sheet Building Blocks

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related