previous   next   contents   properties   descriptors   index

2 Introduction to CSS2

Contents

  1. A brief CSS2 tutorial for HTML
  2. A brief CSS2 tutorial for XML
  3. The CSS2 processing model
    1. The canvas
    2. CSS2 addressing model
  4. CSS design principles

2.1 A brief CSS2 tutorial for HTML

In this tutorial, we show how easy it can be to design simple style sheets. For this tutorial, you will need to know a little [HTML40] and some basic desktop publishing terminology.

We begin with a small HTML document:

<HTML>
  <TITLE>Bach's home page</TITLE>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

To set the text color of the H1 elements to blue, you can write the following CSS rule:

  H1 { color: blue }

A CSS rule consists of two main parts: selector ('H1') and declaration ('color: blue'). The declaration has two parts: property ('color') and value ('blue'). While the example above tries to influence only one of the properties needed for rendering an HTML document, it qualifies as a style sheet on its own. Combined with other style sheets (one fundamental feature of CSS is that style sheets are combined) it will determine the final presentation of the document.

The [HTML40] specification defines how style sheet rules may be specified for HTML documents: either within the HTML document, or via an external style sheet. To put the style sheet into the document, use the STYLE element:

<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    H1 { color: blue }
  </STYLE>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

For maximum flexibility, we recommend that authors specify external style sheets; they may be changed without modifying the source HTML document, and they may be shared among several documents. To link to an external style sheet, you can use the LINK element:

<HTML>
  <TITLE>Bach's home page</TITLE>
  <LINK rel="stylesheet" href="bach.css" type="text/css">
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

The LINK element specifies:

2.2 A brief CSS2 tutorial for XML

CSS can be used with any structured document format, for example [XML]. In fact, XML depends more on style sheets than HTML since authors can make up their own elements which user agents don't know how to display.

Here is a simple XML fragment: 

  <ARTICLE>
    <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
    <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
    <LOCATION>Potsdam</LOCATION>
    <PARA>
      One evening, just as he was getting his 
      <INSTRUMENT>flute</INSTRUMENT> ready and his
      musicians were assembled, an officer brought him a list of
      the strangers who had arrived.
    </PARA>
  </ARTICLE>

To display this fragment in a document-like fashion, we must first declare which elements are inline (i.e., do not cause line breaks) and which are block-level (i.e., cause line breaks). 

  INSTRUMENT { display: inline }
  ARTICLE, HEADLINE, AUTHOR, LOCATION, PARA { display: block }

The first rule declares INSTRUMENT to be inline, and the second rule, with its comma-separated list of selectors, declares all the other elements to be block-level.

It's not yet clear how style sheets will be linked to XML documents, but assuming the above CSS fragment is combined with the XML fragment, a visual user agent could format the result as: 

Fredrick the Great meets Bach
Johann Nikolaus Forkel
Potsdam
One evening, just as he was getting his flute ready 
and his musicians were assembled, an officer brought 
him a list of the strangers who had arrived.

Notice that the word "flute" remains within the paragraph since it is the content of the inline element INSTRUMENT.

Still, the text isn't formatted the way you would expect. For example, the headline font size should be larger than then rest of the text, and you may want to display the author's name in italic:

  INSTRUMENT { display: inline }
  ARTICLE, HEADLINE, AUTHOR, LOCATION, PARA { display: block }
  HEADLINE { font-size: 1.5em }
  AUTHOR { font-style: italic }

[add image, description]

Adding more rules to the style sheet will allow you to further improve the presentation of the document.

2.3 The CSS2 processing model

This section presents one possible model of how user agents that support CSS work. This is only a conceptual model; real implementations may vary.

In this model, a user agent processes a source by going through the following steps:

  1. Parse the source document and create a document tree from the source document.
  2. Identify the target media type.
  3. Retrieve all style sheets associated with the document that are specified for the target media type.
  4. Annotate every node of the document tree by assigning a single value to every property that is applicable to the target media type. Properties are assigned values according to the mechanisms described in the section on cascading and inheritance.

    Part of the calculation of values depends on the formatting algorithm appropriate for the target media type. For example, if the target medium is the screen, user agents apply the visual rendering model. If the destination medium is the printed page, user agents apply the page model. If the destination medium is an aural rendering device (e.g., speech synthesizer), user agents apply the aural rendering model.

  5. From the annotated document tree, generate a rendering structure. The rendering structure may differ significantly from the document tree. First , the rendering structure need not be "tree-shaped" at all -- the nature of the structure depends on the implementation. Second the rendering structure may contain more or less information than the document tree. For instance, if an element in the document tree has a value of 'none' for the 'display' property, that element will generate nothing in the rendering structure. A list element, on the other hand, may generate more information in the rendering structure: the list element's content and list style information (e.g., a bullet image).
  6. Transfer the rendering structure to the target medium (e.g., print the results, display them on the screen, render text as speech, etc.).

Step 1 lies outside the scope of this specification (see, for example, [DOM]).

Steps 2-5 are addressed by the bulk of this specification.

Step 6 lies outside the scope of this specification.

2.3.1 The canvas

For all media, the term canvas describes "the space where the rendering structure is rendered." The canvas is infinite for each dimension of the space, but rendering generally occurs within a finite region of the canvas, established by the user agent according to the target medium. For instance, user agents rendering to a screen generally impose a minimum width and choose an initial width based on the dimensions of the viewport. User agents rendering to a page generally impose width and height constraints. Aural user agents may impose limits in audio space, but not in time.

2.3.2 CSS2 addressing model

CSS2 selectors and properties allow authors to refer to the following "entities" from within a style sheet:

2.4 CSS design principles

CSS2, as CSS1 before it, is based on set of design principles:

previous   next   contents   properties   descriptors   index