Styling the New Web

Web Usability with Style Sheets

Steven Pemberton

CWI and W3C
Kruislaan 413
1098 SJ Amsterdam
The Netherlands

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

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

Part 1
Introduction, basic CSS: selectors, fonts, colours; Practical
Part 2
Intermediate-level stuff: advanced selectors, inheritance, margins, borders, padding; Practical
Part 3
Advanced stuff: text properties, background, positioning; Practical
Part 4
The Future: XML and XHTML; Practical

HTML and SGML

Contamination

Style Sheets

CSS

Motivation

Csszengarden.com is a website with essentially one HTML page.

And hundreds of beautiful, breathtaking CSS stylesheets applied to that one page.

Is uses very simple HTML: div, h1, h2, h3, span, p, ul/li, a, acronym

As you look at each presented page, you have to keep repeating to yourself: this is the same HTML page.

Butterfly

Post

focus

gemination

party

worm

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?

Using CSS

Normally, you put your CSS descriptions in an external file, and link to that from your HTML:

<html>
<head>
<link rel="stylesheet"
      type="text/css"
      href="your-filename.css">
</head>
<body> ...</body>
</html>

Inline style is also possible

You can also put your style sheets in the head of your HTML document:

<head>
<style type="text/css">
           h1 { color: blue }
</style>
</head>

For many reasons, it is better to use external style sheets

Style sheets for XML

For XML use a processing instruction:

    <?xml-stylesheet type="text/css"
       href="your-filename.css"?>

Put before first element of the document

HTML Style Attributes

HTML also allows you to use a STYLE attribute:

<P STYLE="color: red">Stop!</P>

This is bad practice, and undoes many of the advantages of CSS.

Doesn't (necessarily) work for XML.

Warning about HTML: <p>

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.

Structure of CSS1

Comments

Basic Selectors

Warning about HTML: case

Examples

All matching rules apply

You can have as many rules as you like for a selector. All rules that apply to an element get applied. Clashing declarations are resolved by giving priority to more specific selectors, and later rules.

So

h1 {font-weight: bold}
h1 {font-size: 200%}

is equivalent to

h1 {font-weight: bold; font-size: 200%}

Styling text

There are a number of properties for affecting the style of text:

font-size

Warning about 'initial values'

Lengths

Relative:

Absolute:

Warning about font sizes

Don't use pixels for font sizes, because you don't know the resolution of the screen that anyone is using.

For instance, font-size: 12px will give you

Similarly, avoid using point sizes as well:

Respect these people: try to use relative font sizes. Use font-size: 100% for paragraph text, font-size: 120% or so for headings, font-size: 80% for copyright statements, etc.

font-weight

font-style

font-family

You should always end with a generic family

Colours: color and background-color

Practical 1

Make a stylesheet that gives <em> elements a yellow background colour, and makes <strong> elements be white text on a black background.

Class Selectors

Use of HTML: span

Advice: use class names that describe the purpose, not the presentation. For instance, use class="important", not class="red".

ID Selectors

Use an ID selector to document that there can only be one in the document, while there can be any number of elements using the same class.

Contextual Selectors

These allow you to address the nesting of the document:

h1 { font-weight: bold }
em { font-style: italic }

<h1><em>Now</em> is the time!</h1>

Now is the time

h1 em { font-weight: normal }

Now is the time

Examples of contextual selectors

Inheritance

Use of HTML: div

display

Example of display: none

In the CSS:

.notcss {display: none}

In the HTML:

<p class="notcss">
        Your browser doesn't support CSS
</p>

Example of display: none

You can use display: none with different stylesheets, to make different parts of the document visible. E.g. one stylesheet can show deletions with the text struck through:

del { text-decoration: line-through }

another can make the deletions not visible:

del { display: none }

NB with:

body {display: none}
h1 {display: block}

the h1's are still invisible, since the whole body is invisible

text-align

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.

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.

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.

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.

Box model

Margin
Border
Padding
Content

height and width properties

Margin
Border
Padding
Content Height
 
 
 
Width

Note major bug in early versions of IE, where width affected the whole box. This still shows up in modern IE if you forget the DOCTYPE.

Box model: margin, border, padding

Margins: margin-top, -right, -bottom, -left

Warnings about use of margins

  1. body {margin-left: 4em}
    h1 {margin-left: -4em}

    <h1> typically has a larger font-size to <body>, therefore the '-4em' on h1 is larger than the 4em on <body>

  2. body {margin-left: 4em}
    h1 {margin-left: 0}

    h1 will have the same indent as the body (margins are relative to the parent element, not the screen)

Shortcuts: margin

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)

 

Padding: padding-top, -right, -bottom, -left

Margin
Border
Padding
Content

Padding

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.

Borders: width, style and color

Margin
Border
Padding
Content

Borders can have a width, style and color. For widths:

Shorthand: border-width

border-style

dotted dashed solid double groove ridge inset outset

border-color

Shorthands: border-top, -right, -bottom, -left

One last border shorthand: border

Warning: border-style

If you set border-width, or border-color, and forget to set border-style, since the default is 'border-style: none' you will see no border!

Always set border-style if you want a border.

Warning about using shorthands

Better to be explicit.

Usage of borders

Use borders for:

Setting off text with a line each side

Enclosing text in a box

Putting a line under a paragraph

Marking changed paragraphs with a line

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

The End The End

height and width

The height and width of elements is normally determined by context or by the element itself.

For instance, for text, the width is determined by the width of the window, and the height by the amount of text.

Images have an inbuilt size.

You can change these defaults with the height and width properties.

width

Auto values for box model

Margin
Border
Padding
Content

Example

<div class="outer">
   <div class="middle">
      <div class="inner">mmmmm</div>
   </div>
</div>

with

div {margin: 0.5em 1em;
     border: thin black solid}

gives:

mmmmm

Example (contd)

Setting respectively inner, middle and outer to width: 9em gives:

mmmmm
mmmmm
mmmmm

Practical 2

Make a stylesheet that indents all text except headings.

Make a stylesheet that hides all text except headings. Indent headings according to their importance (don't indent <h1>; indent <h2> a little; <h3> a little more, etc.)

Text properties: line-height

Warning about line-height

body {font-size: 10pt; line-height: 1.2}
h1 {font-size: 20pt}

h1 has a line-height of 20pt x 1.2 = 24pt

body {font-size: 10pt; line-height: 1.2em}
h1 {font-size: 20pt}

h1 inherits the same line-height as body, which is 10pt x 1.2em = 12pt

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.

word-spacing, letter-spacing

vertical-align

Background properties: background-image

background-position

background-repeat

       

background-attachment

Technique: Images for headlines

All too often Websites use images for major headings. This causes some problems:

However, there is a technique that gives you the best of both worlds: put the text in the HTML and override it with an image in the CSS

Images for headlines

In the HTML, use a heading, with the text in a span:

<h1><span>Images for headlines</span></h1>

In the CSS, turn off the span:

h1 span {display: none}

and add a background image to the h1:

h1 { background-image: url(text.gif); 
     background-repeat: no-repeat;
     background-position: 50% 50%
     height: 80px; width: 80px;  }

Pseudo Classes: Anchors

a:link { color: blue }
a:visited { color: #f0f }
a:active { color: red }
a:link img { border-style: solid;
             border-color: blue }
a:hover {background-color: yellow}

Note on <a>

a {color: green}
a:link {color: blue}

This will colour <a name="..."> elements green, and
<a href="..."> elements blue.

Beware!

p {color: red}
a:link {color: blue}

<p><a href="...">Click here</a></p>

"Click here" will be blue.

Pseudo element:
first-line, first-letter

p:first-line {font-variant: small-caps;
              color: blue}
p:first-letter {font-size: 200%;
                color: red}

font-variant

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.

Technique: multi-columns using float

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.

clear

poppyLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

A Heading

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.

poppyLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

A Heading

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.

 

Use of clear

Both of the images are at the start of the paragraph (in the source). The flower is first, then the star; the left example has img {float: left} and the right has img {float: left; clear: left}:

poppystar 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.
poppy star 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.

 

text-transform

font

white-space

Remember: there is nothing inherent in the <pre> element that causes it to retain layout and output in a monospaced font: it is the styling that does that. You can change it.

list-style-type

list-style-type: examples

This is a single <ul> with different list-style-types applied to each <li>:

list-style-image

list-style-position

list-style

This is a shorthand

Cascading

Selectivity of selectors

Optional Stylesheets

<link rel="stylesheet"
      type="text/css" href="main.css">
<link rel="alternate stylesheet" title="Big"
      type="text/css" href="alt.css">
<link rel="stylesheet" media="print"
      type="text/css" href="print.css">

Media: all, screen, print, projection, handheld, tv, tty, aural, braille, embossed.

Also:

<style type="text/css" media="print">
      ...
</style>

Practical 3

Here is a document styled with HTML and images.

Do some of the obvious parts with CSS (as much as you have time for).

Implementation

Already available in:

Implementation

Level Compatibility

Ignore rule:
*[width] {font-size: 10pt; color: blue}

Ignore declaration:
p {overflow: hidden; color: blue}

Ignore declaration:
h2 {display: run-in; color: blue}

CSS2 and 3

Later areas of work include:

Selectors

More selectors, such as:

Features

More features

Overflow

Values: visible, hidden, scroll, auto, inherit
Default: visible

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. 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. 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.

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. 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. 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.

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. 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. 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.

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. 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. 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.


Position

Values: static, relative, absolute, fixed, inherit
Default: static

Uses properties:

Technique – a fixed list of links

See example. HTML:

<div class="nav">
   <h2>Links</h2>
   <p>
      <a href="...">Home</a>
      <a href="...">Away</a>
      ...
   </p>
</div>

And then in the CSS:

.nav { position: fixed;
       top: 0; right: 0;
       width: 6em;
       ...}
.nav a {display: block}

Technique: Hover pop-ups

ExampleAn example of popup text controlled entirely by CSS

This contains markup like

<a class="popup" href="...">Example<span>Popup text
 here</span></a>

and rules like

a.popup span {display: none}
a.popup:hover span {
    display: block; width: 10em; 
    background-color: yellow; border: dotted black thin;
    position: relative; left: 100px;}

Generated content

You can generate content that isn't in the document.

For instance, this slide does not have the initial "CSS2: " in the header, but a rule that says

h2.CSS2:before {content: "CSS2: "}

There is also a ":after".

Numbering

In the printed version of these slides, each slide has bene given a number.

This is done using rules like:

div.slide h2 {counter-increment: slide}
div.slide h2:before{ content: counter(slide) "  "}

CSS3

Where?

The definition of CSS1 can be found at:

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

The definition of CSS2 is at

http://www.w3.org/TR/REC-CSS2/

CSS resources can be found at www.w3.org/style/css

Future Markup

XML

Consequences

Consequences 2

Consequence of XML

So do we still need HTML?

HTML as XML application

Differences HTML:XHTML

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Virtual Library</title></head>
<body>
<p>Moved to <a href="http://vlib.org/">vlib.org</a>.
</p>
</body>
</html>

Namespaces

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>A Math Example</title></head>
<body>
<p>The following is MathML markup:</p>
<math xmlns="http://www.w3.org/TR/REC-MathML">
<apply><log/><logbase><cn> 3 </cn> </logbase>
<ci> x </ci>
</apply>
</math>
</body></html>

Transition

Examples of Guidelines

Versions of XHTML

There are now several versions of XHTML in use:

There are also versions for TVs and printers in preparation, as well as XHTML 2.0, with many new features.

Result

Reminder: Using style sheets with XML

For XML use a processing instruction:

    <?xml-stylesheet type="text/css"
       href="your-filename.css"?>

Put before first element of the document

Practical 4: RSS

An RSS document is an XML document that contains elements like this:

<item rdf:about="http://www.w3.org/News/2004#item155">
  <title>W3C Celebrates Ten Years Leading the Web</title>
  <description>This year, W3C celebrates its tenth anniversary. ...
  </description>
  <link>http://www.w3.org/News/2004#item155</link>
  <dc:date>2004-10-07</dc:date>
</item>

Write a stylesheet to make such a document readable.

Overview of properties, with examples and defaults

Overview of box properties

Web Resources for CSS, XML and XHTML

Quick Reference to Cascading Style Sheets, level 1

This version is based on:
http://www.w3.org/TR/REC-CSS1
Latest version:
http://www.w3.org/TR/WD-css1.html
Author:
Steven Pemberton (Steven.Pemberton@cwi.nl)

Syntax

a b c
a is followed by b is followed by c, in that order.
a | b
either a or b must occur
a || b
either a or b or both must occur, in any order
[a b]
brackets, used for grouping
a?
a is optional
a*
a is repeated 0 or more times
a+
a is repeated 1 or more times
a{1,4}
a is repeated at least once and at most 4 times.

Juxtaposition is stronger than the double bar, and the double bar is stronger than the bar. Thus "a b | c || d e" is equivalent to "[ a b ] | [ c || [ d e]]".

Definitions

Block-level elements
an element which has a line break before and after (e.g. <H1>, <P>)
Replaced element
An element which is replaced by content pointed to from the element. E.g., <IMG>.

Properties

In each definition

5.2    Font properties

5.2.2 font-family
[[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Initial: UA specific
<generic-family>
serif | sans-serif | cursive | fantasy | monospace
5.2.3 font-style
normal | italic | oblique
5.2.4 font-variant
normal | small-caps
5.2.5 font-weight
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
5.2.6 font-size
<absolute-size> | <relative-size> | <length> | <percentage>
Initial: medium
Percentage values: relative to parent element's font size
<absolute-size>
xx-small | x-small | small | medium | large | x-large | xx-large
<relative-size>
larger | smaller
5.2.7 font
[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Initial: not defined for shorthand properties
Percentage values: allowed on <font-size> and <line-height>

5.3    Color and background

5.3.1 color
<color>
Initial: UA specific
5.3.2 background-color*
<color> | transparent
5.3.3 background-image*
<url> | none
5.3.4 background-repeat*
repeat | repeat-x | repeat-y | no-repeat
5.3.5 background-attachment*
scroll | fixed
5.3.6 background-position*
[<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Applies to: block-level and replaced elements
Initial: 0% 0%
Percentage values: refer to the size of the element itself
5.3.7 background*
<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Initial: not defined for shorthand properties
Percentage values: allowed on <background-position>

5.4    Text properties

5.4.1 word-spacing
normal | <length>
5.4.2 letter-spacing
normal | <length>
5.4.3 text-decoration*
none | [ underline || overline || line-through || blink ]
Inherited: no, but see clarification below
5.4.4 vertical-align*
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Applies to: inline elements
Percentage values: refer to the 'line-height' of the element itself
5.4.5 text-transform
capitalize | uppercase | lowercase | none
5.4.6 text-align
left | right | center | justify
Applies to: block-level elements
Initial: UA specific
5.4.7 text-indent
<length> | <percentage>
Applies to: block-level elements
Initial: 0
Percentage values: refer to parent element's width
5.4.8 line-height
normal | <number> | <length> | <percentage>
Percentage values: relative to the font size of the element itself

5.5    Box properties

5.5.1 margin-top*
<length> | <percentage> | auto
Initial: 0
Percentage values: refer to parent element's width
5.5.2 margin-right*
<length> | <percentage> | auto
Initial: 0
Percentage values: refer to parent element's width
5.5.3 margin-bottom*
<length> | <percentage> | auto
Initial: 0
Percentage values: refer to parent element's width
5.5.4 margin-left*
<length> | <percentage> | auto
Initial: 0
Percentage values: refer to parent element's width
5.5.5 margin*
[ <length> | <percentage> | auto ]{1,4}
Initial: not defined for shorthand properties
Percentage values: refer to parent element's width
5.5.6 padding-top*
<length> | <percentage>
Initial: 0
Percentage values: refer to parent element's width
5.5.7 padding-right*
<length> | <percentage>
Initial: 0
Percentage values: refer to parent element's width
5.5.8 padding-bottom*
<length> | <percentage>
Initial: 0
Percentage values: refer to parent element's width
5.5.9 padding-left*
<length> | <percentage>
Initial: 0
Percentage values: refer to parent element's width
5.5.10 padding*
[ <length> | <percentage> ]{1,4}
Initial: 0
Percentage values: refer to parent element's width
5.5.11 border-top-width*
thin | medium | thick | <length>
5.5.12 border-right-width*
thin | medium | thick | <length>
5.5.13 border-bottom-width*
thin | medium | thick | <length>
5.5.14 border-left-width*
thin | medium | thick | <length>
5.5.15 border-width*
[thin | medium | thick | <length>]{1,4}
Initial: not defined for shorthand properties
5.5.16 border-color*
<color>{1,4}
Initial: the value of the 'color' property
5.5.17 border-style*
none | dotted | dashed | solid | double | groove | ridge | inset | outset
5.5.18 border-top*
<border-top-width> || <border-style> || <color>
Initial: not defined for shorthand properties
5.5.19 border-right*
<border-right-width> || <border-style> || <color>
Initial: not defined for shorthand properties
5.5.20 border-bottom*
<border-bottom-width> || <border-style> || <color>
Initial: not defined for shorthand properties
5.5.21 border-left*
<border-left-width> || <border-style> || <color>
Initial: not defined for shorthand properties
5.5.22 border*
<border-width> || <border-style> || <color>
Initial: not defined for shorthand properties
5.5.23 width*
<length> | <percentage> | auto
Applies to: block-level and replaced elements
Percentage values: refer to parent element's width
5.5.24 height*
<length> | auto
Applies to: block-level and replaced elements
5.5.25 float*
left | right | none
5.5.26 clear*
none | left | right | both

5.6    Classification

5.6.1 display*
block | inline | list-item | none
5.6.2 white-space
normal | pre | nowrap
Applies to: block-level elements
5.6.3 list-style-type
disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Applies to: elements with 'display' value 'list-item'
5.6.4 list-style-image
<url> | none
Applies to: elements with 'display' value 'list-item'
5.6.5 list-style-position
inside | outside
Applies to: elements with 'display' value 'list-item'
5.6.6 list-style
<list-style-type> || <list-style-position> || <url>
Applies to: elements with 'display' value 'list-item'
Initial: not defined for shorthand properties

6.1    Length units

<length>
[+|-]?<number><unit>
<number>
<digit>+[.<digit>*]?
<unit>
<absolute-unit> | <relative-unit>
<absolute-unit>
mm | cm | in | pt | pc
<relative-unit>
em | ex | px

6.2    Percentage units

<percentage>
<number>%

6.3    Color units

<color>
<color-name> | <rgb>
<color-name>
aqua | black | blue | fuchsia | gray | green | lime | maroon | navy | olive | purple | red | silver | teal | white | yellow
<rgb>
#<hex><hex><hex> |
#<hex><hex><hex><hex><hex><hex> |
rgb(<number>, <number>, <number>) |
rgb(<percentage> <percentage>, <percentage>)

6.4    URL

<url>
url(<text>)