Style sheet building blocks
This presentation is the property of its rightful owner.
Sponsored Links
1 / 10

Style Sheet Building Blocks PowerPoint PPT Presentation


  • 57 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Style sheet building blocks

Style Sheet Building Blocks

Chapter 7 & 8

4/8/08

Spring 2008


Styles style sheets

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


Style rules

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


Style rule comments

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


Cascading

“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


Principle of the cascade

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


Property s value

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


External style sheet

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


Using styles

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


Apply style locally

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


  • Login