The learner will learn the benefit and possible drawbacks of using Cascading Style Sheets.
Think about the "I Have a Dream" speech. Consider all the ways you have encountered it: you may have seen a film of it, read it in the newspaper, tracked in down on the web, read it in a book. Regardless of the way you encountered it, it's the same speech with the same messages about "hills and molehills of Mississippi" and judging people by "the content of their character, not the color of their skin." How did the presentation change the contents?
A style sheet is any rule or sequence of rules that affect the appearance of a document. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, and spacing) to Web documents.
Cascading Style Sheets are used to separate presentation from content. It is a tool for controlling the design and layout of web contents.
The World Wide Web Consortium (W3C) developed Cascading Style Sheets.
There are two levels of Cascading Style Sheets.
CSS Level One (CSS-1) is partially supported by Netscape 4.x and Microsoft Internet Explorer 4.x and later.
CSS-2 expands on CSS-1 while including all of Level One's features. It is probably safe to say all browsers will support Cascading Style Sheets someday.
Because not all browsers currently support Cascading Style Sheets it is important to verify your page using a browser that doesn't support them.
One advantage of Cascading Style Sheets is that if they are used properly you only have to change one source to impact all the pages of a web site. This makes for quicker and cleaner maintenance.
Text browsers such as Lynx do not support Cascading Style Sheets.
Older versions of Netscape Navigator, Microsoft Internet Explorer, AOL and Opera have little or no support for Cascading Style Sheets.
There are four style sheet types in CCS-1 specifications: inline style, embedded style sheet, linked style sheets and imported style sheets. Embedded and linked style sheets are most commonly used.
Inline style - Inserted directly into any HTML tag using the STYLE attribute. Inline styles only affect the element they're inserted into.
Embedded style sheet - Placed inside the head section of an HTML document; defines document-wide styles (on its own page only).
Linked (external) style sheet - Used as a global template; an external document consisting only of style sheet rules (no HTML) that you can point multiple documents to.
Imported style sheet - Used when a document requires styles in addition to those applied document-wide. Imported style sheets are external CCS files that can be used to cascade with other imported style sheets (not supported by Navigator 4.x).
Tools to help
W3C CSS Validation Service (http://jigsaw.w3.org:80/css-validator).
Poll the audience for where they have encountered the "I Have a Dream" speech by Martin Luther King. Solicit suggestions for styling the speech on the fly. (For example: font, size, background color, paragraph spacing.)
Quick quiz packet: Cascading Style Sheets quiz:
Name four kinds of style sheets.
To access Lesson Plan as a Microsoft® Word document: Cascading_Stylesheets_lessonplan.doc
Back to Section Table of Contents
Back to Curriculum Table of Contents