Cascading Style Sheets:: CSS-1 and CSS-P For Web Publishing

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 }

Example
✔without CSS
✔with CSS as shown below
<html><head>
<style type="text/css">  </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 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
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.

Cascading Style Sheets:: CSS-1 and CSS-P For Web Publishing

Uploaded by

Copyright:

Available Formats

Cascading Style Sheets:: CSS-1 and CSS-P For Web Publishing

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cascading Style Sheets:: CSS-1 and CSS-P For Web Publishing

Uploaded by

Copyright:

Available Formats

Cascading Style Sheets:

CSS-1 and CSS-P for web publishing

browser release date CSS1 CSS2

selectors { property:value pairs }

plus the default stylesheet for the browser and in some

That’s all, folks.

You might also like