Cascading Style Sheets

:
CSS-1 and CSS-P for web publishing
JQ Johnson University of Oregon

Talk Outline
Introduction Nuts and bolts of CSS Benefits Issues Practical advice Discussion

Teaser: new power for HTML
CSS offers many things, not least being new “features” for web page authors Example

A bit of history
HTML 3.2 developed 1995; W3C recommendation Jan 1997 CSS level 1 W3C recommendation 17 Dec 1996 HTML 4.0 W3C recommendation 18 Dec 1997 CSS level 2 W3C recommendation 12 May 1998

Browser support for CSS
browser MSIE 3.0 Netscape 4.0 MSIE 4.0 Netscape 4.5 Netscape 5 release date fall 1996 fall 1997 Oct 1998 ?? CSS1 CSS2 CD C D B? ? B BAA-?

summer 1997 B-

MSIE 5.0Beta Nov 1998

What is CSS?
Styles are rules that modify the behavior of tags in your document. Each rule has a selector (usually an HTML element), and some property/value pairs
selectors { property:value pairs }

Example
without CSS with CSS as shown below
<html><head> <style type="text/css"> <!-H1 { text-align: center } H1,H2,H3 {color: #990000; font-family: arial,sans-serif; } BODY { background: white; text-align: justify } --> </style>
</head> ...

Specifying a CSS
<HEAD> <LINK REL=STYLESHEET TYPE="text/css" HREF="mystyles.css"> [linked stylesheet] <STYLE TYPE="text/css"> [embedded stylesheet] @import url(standardstyles.css); [imported] H1, H2 { font: Arial,sans-serif; } </STYLE> ... <BODY> ... <DIV STYLE="color: red">This block is red.</DIV> [inline style]

plus the default stylesheet for the browser and in some browsers a user-specified stylesheet.

Selectors
Any HTML element can be a selector Also some pseudo-elements, e.g.
A:link,A:visited,A:active,A:hover

Selectors can be contextual
H2 { font-style: italic} H2 I, H2 EM { font-style: normal } . . . <P>This paragraph has <I>Italics</I> <H2>This heading has <I>Italics</I> too</H2>

– Example

More selectors
A selector can specify a “class”
– Use the class attribute on a tag to select the particular variant, e.g.
<P CLASS=WARNING>Only one class is allowed per selector</P>

– Define as specific to one tag, or for all tags
P.JUSTIFY { text-align:justify } .WARNING { font-weight:bold; color:red }

– Example

Properties
Properties control font, color, text appearance, borders, etc. Most property values are inherited (a nested tag gets properties of outer tags).
BODY { color: #00CC00; background: url(sky.jpg) }

More properties
Values are not quoted. They can be single words, a comma-separated list of fonts, or a space-separated list of values. Example: blockquote {
font-family: Comic Sans MS, sans-serif; border-width: 0 0 0 thin; border-style: solid; }

Positioning properties
Positioning wasn't part of CSS-1, but works in both MSIE 4 and Netscape 4. Kinds of positioning:
– relative -- inline and in-band. – absolute -- relative to window and out-of-band.

Positioning also allows overlapping. Example

Caveat auctor!
Expect that many properties fail to work at all, or only work in some contexts (e.g. applied to certain tags or in certain combinations), or only work in some browsers.

Benefits
Clean up HTML syntax -- reign in browserspecific extensions Increase expressive power Separate text/function from appearance Allow externally-defined appearance specs that can apply to whole site Increase portability, accessibility

Issues
CSS1 versus HTML 3.2 Browser implementation bugs Browser implementation differences Inheritance Interactions between styles Backwards compatibility -- not!

Issues: CSS1 vs HTML 3.2
can’t describe the behavior of tables, frames requires rethinking of P tag precedence of non-CSS display attributes is unclear.
P {color:black; text-align:right} . . . <P ALIGN=CENTER>I’m <FONT COLOR=RED>Red</FONT></P>

(some authors disagree, but I sayit should be right-aligned and red)

Issues: browser bugs
Partial implementations Outright bugs Warning: bugs are often very context or browser-version sensitive Example: Lets add two rules to our chillyclimate page: MSIE / Netscape
BODY { font-family: Arial,sans-serif } H1 { background-color: #FFFF66 }

Issues: browser implementation differences
Different levels of nominal spec support (CSS-1, CSS-2) Different interpretations of the specs Different default stylesheets

Issues: inheritance isn’t very useful
it’s often where the bugs are in CSS-1, it’s at best a last-place default in complex designs, it can’t be depended on
– Example: suppose I set the font for my document in the BODY, then some other stylesheet sets it for TABLEs

Interactions between styles
Rules for cascade priority are baroque (and often broke) Interactions between properties are hard to control
– Suppose my color scheme uses yellow on green, then the site-wide stylesheet is modified to define text, or just visited links, as green. – Suppose I defined H1 as being 24 point, then a user style sheet defines text as 72 point

Issues: backwards compatibility
You could implement all visuals twice, once with FONT etc and once with stylesheets A better approach is to design/test without CSS, then add CSS as an afterthought An alternative is to avoid all FONT tags etc., and depend only on CSS

Issues: forwards compatibility
CSS-2 Scripted CSS Document Object Model XML and XSL CSS-3???

Some practical advice
Know your audience (and their browsers)
– design for graceful degradation – limit yourself to CSS 1 and CSS-P

Test, test, and more test
– in multiple browsers – without CSS – after every incremental style change

More advice
KISS
– don’t depend on inheritance – avoid cascading (multiple stylesheets) – for now, avoid layering and most CSS-2

Use appropriate tools
– avoid pre-1998 HTML authoring tools – consider Dreamweaver, Golive Cyberstudio, Frontpage 2000

Where to from here?
Learn CSS-1 syntax Start rethinking your static web sites Use good coding practices With DOM, use CSS scripting to build dynamic web pages

Discussion

That’s all, folks.