Introduction to Cascading Style Sheets:
Facts and Factoids for the Course.

Computing & Information Services Department.
instructor: jim.cerny@unh.edu

1. Overview:

Description:

"Cascading Style Sheets are part of the new Dynamic HTML They are a simple but powerful way to control design and layout of HTML pages (fonts, colors, margins, etc.) and to change the look of many pages by one set of edits. Covers basic syntax and use. Prerequisite: basic HTML knowledge."

Support statement:

Computing & Information Services offers consulting support on HTML and considers CSS as part of HTML.

Goals:

To explain the role of Cascading Style Sheets (CSS) now and in HTML futures.

To leave you ready to begin including CSS in your Web pages.

To point toward major online and print resources for more information.

2. Background.

Why was CSS introduced to HTML anyway?

· W3C efforts to get open standards in place to bring order out of chaos.

· W3C Document Object Model (DOM).

· Separation of document structure and presentation.

· Use of Cascading Style Sheets (CSS1 and CSS2) for presentation.

http://www.w3.org/TR/REC-CSS1-961217

· Potential for multiple style sheets for presentation in multiple media.

· Proposals for embedding fonts.

· Compare and contrast with Adobe Acrobat approach.

How supported and standardized is it?

· Current standard is CSS1, with CSS2 in development.

· Netscape 3.x -- no support; Netscape 4.x -- most of CSS1.

· MSIE 3.x -- limited CSS1 support; MSIE 4.x and 5.x -- most of CSS1.

· Lynx 2.8.x does not support CSS at all.

· Cascade of implementation issues:

- develop standards

- implement standards in browsers

- implement on all major platforms

Major style sheet features:

· Flexible placement of style information.

· Independence from specific style sheet languages.

· Cascading "parent-child" inheritence of style.

e.g., corporate docs, group of docs, specific doc.

· Media dependencies and alternate styles.

Issues to consider up-front:

· OK, I can create a style sheet, what should I put in it?

· How transition from existing HTML 3.2 practices to HTML 4.0 practices?

· Assumptions about one's audience and its browsers?

3. Some basic jargon, rules, and syntax.

Cascading = order and precedence rules with multiple style sheets.

· basic logic: general to specific, top to bottom.

Persistent, default, and alternate styles may exist.

CSS not case-sensitive (but use mixed case conservatively).

Very easy to make small syntax mistakes (see CSSCheck at Web Builder).

Comments are similar to C and other programming languages:

/* This is a comment. */

Selectors (usu. HTML elements) have declarations with format specs

divided into properties and values.

selector {property1: value1; property2: value2 }

H2 { font-family: sans-serif; color: red } /* single */

H1,H2,H3 { font-family: sans-serif; color: red } /* grouped */

BODY P { color: blue; } /* contextual */

Note use of curly braces to enclose properties and their values.

Note use of semicolons to separate multiple properties.

Note grouping of selectors and declarations is allowed.

Note contextual rules for selectors nested within selectors.

Embedded (internal) style sheets in HEAD section of HTML document:

<STYLE> ... </STYLE>

Linked external style sheets in HEAD section of an HTML document:

<LINK REL=stylesheet HREF="myownstyle.css TYPE="text/css">

Important to configure one's Web server for the css MIME type.

Inlined style sheets in any BODY element of an HTML document:

<P STYLE="border-style: solid; border-width: thin; border-color: red">

This paragraph will have a red box drawn around it. Cool. </P>

Minimum of valid colors (16) by name are as follows (but more are often used and supported by common browsers):

AQUA, BLACK, BLUE, FUCHSIA, GRAY, GREEN, LIME, MAROON, NAVY,

OLIVE, PURPLE, RED, SILVER, TEAL, WHITE, YELLOW

Disclaimer: many features of CSS are omitted from this short course!

4. Examples of CSS in action.

All of these examples are in the "CSSintro" course area. We will have time in class for a handful of examples, leaving others for you to explore on your own.

Caveats:

· Not all browsers are CSS-capable.

· Not all browser versions (platforms) are CSS-capable to the same extent.

· Not all user will have enabled CSS in CSS-capable browsers.

· If a Netscape user disables JavaScript, they disable CSS.

· Some users may have their own stylesheets, disabling yours.

Work through instructor examples and W3C test suite.

5. Next steps and questions.

Upgrade to a generation 4.x browser that supports CSS.

Experiment. Use for Rapid Application Development (RAD).

Issues to revisit as you progress:

· OK, I can create a style sheet, what should I put in it?

· How transition from existing HTML 3.2 practices to HTML 4.0 practices?

· Assumptions about one's audience and its browsers?

Who will develop style sheets for general use?

· On campus we have created a library area to populate:

http://www.unh.edu/CSS/

· Not aware of any CSS libraries yet on the Web.

On your own server, be sure to update your MIME types file:

text/css css

Editor support for CSS.

· special CSS editors (e.g., HexWeb CSS Edit for HexMac).

· general Web authoring tools with good CSS support (e.g., Dreamweaver from Macromedia).

· hand coding in a basic text editor.

What is coming with CSS2?

· support for page breaks

· support for multiple output devices (media) via multiple style sheets

· support for aural style sheets

· embedding fonts

6. Cascading Style Sheets resources on the Web.

For URLs, see the links on the course Web page:

http://www.unh.edu/NIS/Courses/CSSintro/

Also see:

Danny Goodman, Dyanmic HTML: The Definitive Reference, O'Reilly, paper, 1073 pp., $39.95, ISBN:1-56592-494-0.

Chapter 14, "Style Sheets."

7. Words to style by.

David Siegel, of Studio Verso, in "The Web Is Ruined and I Ruined It," at Web Review:
"Don't look at me. Look at Netscape. They break the rule;s I just do what needs to be done. If I have ruined the Web, I apologize. It was my intention all along. Many people like me have put design and content ahead of structure, and now we can see a light [style sheets] at the end of the tunnel."

Joannie Kervran Stangeland, in "CSS: A Designer's Dream or My Worst Nightmare?", at Microsoft:
"Would we use CSS again? You bet. Would we add a lot more time into the design process? You can bet on that, too. It will be time -- and hair -- saved later".

Paul Bissex, in "The Elephants of Style," at Web Review:
"The consortium [W3C] process definitely has more warts [than ISO], and the industry may not continue forever in its current motion toward open standards. But while it lasts, it's a welcome change. Instead of features designed to make us captive consumers, we have features, like CSS, which just get more useful as more vendors cooperate. Now that's my style."

jim.cerny@unh.edu Stop me before I click again!