Está en la página 1de 27

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 release date CSS1 CSS2

MSIE 3.0 fall 1996 C-
Netscape 4.0 summer 1997 B- D
MSIE 4.0 fall 1997 B C
Netscape 4.5 Oct 1998 B- D
MSIE 5.0Beta Nov 1998 A- B?
Netscape 5 ?? A-? ?
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 }

✔without CSS
✔with CSS as shown below
<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
HREF="mystyles.css"> [linked stylesheet]
<STYLE TYPE="text/css"> [embedded stylesheet]
@import url(standardstyles.css); [imported]
H1, H2 { font: Arial,sans-serif; }
... <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.
✔ Any HTML element can be a selector
✔ Also some pseudo-elements, e.g.
✔ 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>
– 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 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,
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
✔ Clean up HTML syntax -- reign in browser-
specific extensions
✔ Increase expressive power
✔ Separate text/function from appearance
✔ Allow externally-defined appearance specs
that can apply to whole site
✔ Increase portability, accessibility
✔ 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
P {color:black; text-align:right}
. . .
(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
– 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
✔ You could implement all visuals twice,
once with FONT etc and once with
✔ 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
✔ 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
– 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

That’s all, folks.