Styling the New Web

Web Usability with Style Sheets

A CHI 2003 Tutorial

Steven Pemberton

CWI and W3C
Kruislaan 413
1098 SJ Amsterdam
The Netherlands

Steven.Pemberton@cwi.nl
www.cwi.nl/~steven

This document is an extract from the full notes; it is written in XHTML and uses CSS.

It should go without saying that to properly appreciate this document, you have to view it with a browser with good CSS support.

Such browsers include IE 5 or higher, Netscape 5 or higher, Mozilla or its derivatives, and Opera.

If you can see this text, your browser apparently does not support CSS.

Extracts are divided by thick lines that look like this:

Agenda

The day is split into four blocks, each of 90 minutes.

Each block consists of about 45 minutes lecture, followed by 45 minutes practical.

The breaks between blocks are 30 minutes, with 90 minutes for lunch.

Block 1

Introduction, basic CSS: selectors, fonts, colours.

Break

Block 2

Intermediate level: advanced selectors, inheritance, margins, borders, padding.

Lunch

Block 3

Advanced: text properties, background, positioning, cascading.

Break

Block 4

The Future: XML and XHTML.

About the Instructor

Steven Pemberton is a researcher at the CWI, The Centre for Mathematics and Computer Science, a nationally-funded research centre in Amsterdam, The Netherlands, the first non-military Internet site in Europe.

Steven's research is in interaction, and how the underlying software architecture can support the user. At the end of the 80's he built a style-sheet based hypertext system called Views.

Steven has been involved with the World Wide Web since the beginning. He organised two workshops at the first World Wide Web Conference in 1994, chaired the first W3C Style Sheets workshop, and the first W3C Internationalisation workshop. He was a member of the CSS Working Group from its start, and is a long-time member (now chair) of the HTML Working Group, and co-chair of the XForms Working Group. He is co-author of (amongst other things) HTML 4, CSS, XHTML and XForms.

Steven is also Editor-in-Chief of ACM/interactions.

Objectives

HTML has for too long, and incorrectly, been seen as a purely presentation language. It was originally designed as a structure description language, but extra elements were added later by browser manufacturers in order to influence the presentation. This has had the effect of limiting Web site usability by introducing presentation elements that slow down Web access, reduce or prevent accessibility to the sight-impaired, limit the sorts of devices that may be used to view websites, and reduce the end-user's options when viewing a document.

The World Wide Web Consortium (W3C) started the Style Sheet activity in 1995 in order to get HTML back to its pure form. The result of this was Cascading Style Sheets (CSS), which allows the separation of content and presentation in Web sites.

Using style sheets has many benefits, including:

Even if the Web remained based on HTML, these would be enough reasons to use style sheets. However, the Web is now going in a new direction: XML, and XML has no inherent presentation semantics at all. To use XML you have to use a style sheet to make your site visible.

As a part of the movement to XML, a new version of HTML, called XHTML, is being developed. Since all presentation-oriented elements are being dropped, style sheets will become essential there too.

So the objectives of this course are to give an advanced introduction to the use of CSS to style HTML and XML documents, showing in passing how this can improve usability, and to give an introduction to the use of XML and XHTML.

CSS level 1 will be presented, since this is the version currently widely implemented, with pointers to what is in CSS 2, and what can be expected in CSS 3.

These notes have been produced entirely in XHTML and CSS, using different stylesheets for printing, screen use, and presentation. In particular, there are only three images used (to demonstrate the use of images): a star, and two versions of a flower. All other things that look like images are in fact just styled with CSS.

It should go without saying that to properly appreciate this document, you have to view it with a browser with good CSS support.

If you can see this text, your browser apparently does not support CSS.

Course Plan

9:00-10:30
Introduction, basic CSS: selectors, fonts, colours; Practical
11:00-12:30
Intermediate-level stuff: advanced selectors, inheritance, margins, borders, padding; Practical
2:00-3:30
Advanced stuff: text properties, background, positioning; Practical
4:00-5:30
The Future: XML and XHTML; Practical

CSS

Separating Content and Presentation: Author Advantages

Separating Content and Presentation: Webmaster Advantages

Separating Content and Presentation: Reader Advantages

Separating Content and Presentation: Implementor Advantages

Levels

Check your log files!

Why is Usability Important for Websites?

Forrester did research among 8000+ users on why they chose one website above another equivalent one. Reasons were:

All other reasons were 14% or lower.

CSS can't help you with Content or Freshness, but it can with the other two!

Why is CSS good for usability?

Warning about old browsers

CSS implementations are now quite good, but older browsers had a variety of mistakes. Unfortunately, some browser manufacturers want to offer backwards compatibility with those buggy old browsers. So they have two modes: compliant mode, and legacy mode.

To decide which mode to use they look at the document.

Legacy and compliant modes

So if you want your CSS to work right, always include a DOCTYPE at the head of your document.

Warning about HTML: case

Box model

Margin
Border
Padding
Content

height and width properties

Margin
Border
Padding
Content Height
 
 
 
Width

Use of margins

When vertical margins meet

When two margins meet vertically, only the larger is used (so the gap between a heading and the following paragraph is the larger of the heading's margin-bottom and the paragraph's margin-top)

An Example


When two margins meet vertically, only the larger is used (so the gap between a heading and the following paragraph is the larger of the heading's margin-bottom and the paragraph's margin-top)

An Example

When two margins meet vertically, only the larger is used (so the gap between a heading and the following paragraph is the larger of the heading's margin-bottom and the paragraph's margin-top)

 

Example of padding

blockquote
  { margin: 2em;
    background-color: yellow;
    padding: 2em
  }

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Usage of borders

Use borders for:

A border will often be too close to the text: use padding to set it off from the text:

The End The End

text-decoration

text-indent

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

background-repeat

       

Float

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, no sea takimata sanctus est Lorem ipsum dolor sit amet. *** poppy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, no sea takimata sanctus est Lorem ipsum dolor sit amet. *** poppy Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.

 

Use of float

p.menu {float: left;
        background-color: yellow;
....
<p class="menu">Menu items ...</p>
<p>Text ...</p>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Float for multi-columns

div.col {
    width: 31%;
    text-align: justify;
    padding-left: 1%;
    padding-right: 1%;
    border-left: solid 1px black;
    margin: 1em 0;
    float: left;
}
div.col.first {border-style: none}

An example of columns

Here is an example of columns using CSS:

This is a div of class = "first col". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
This is a div of class = "col". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
This is a div of class = "col". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

And then back to single column format after the divs.

Implementation

Already available in:

Implementation