W3C WD-css1-960418


Cascading Style Sheets, level 1

W3C Working Draft 18-Apr-96

This version:
http://www.w3.org/pub/WWW/TR/WD-css1-960418.html
Latest version:
http://www.w3.org/pub/WWW/TR/WD-css1.html
Authors:
Håkon W Lie (howcome@w3.org)
Bert Bos (bert@w3.org)

Status of this document

This is a W3C Working Draft for review by W3C members and other interested parties. It is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". A list of current W3C technical reports can be found at http://www.w3.org/pub/WWW/TR. Since working drafts are subject to frequent change, you are advised to reference the latter URL, rather than the URL for this working draft.


Abstract

This document specifies level 1 of the Cascading Style Sheet mechanism (CSS1). CSS1 is a simple style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to HTML documents. The CSS1 language is human readable and writable, and expresses style in common desktop publishing terminology.

One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. The rules for resolving conflicts between different style sheets are defined in this specification.

Comments to this draft can be sent to the www-style@w3.org mailing list, or directly to the authors. For background material, see the resource page on web style sheets [1]. We encourage browser vendors to start implementing CSS1.

Table of contents

Abstract
Terminology

1         Basic concepts
1.1         Containment in HTML
1.2         Grouping
1.3         Inheritance
1.4         Class as selector
1.5         ID as selector
1.6         Context-sensitive selectors
1.7         Comments
2         Pseudo-classes and pseudo-elements
2.1         Anchor pseudo-classes
2.2         Typographical pseudo-elements
2.3         The 'first-line' pseudo-element
2.4         The 'first-letter' pseudo-element
2.5         Pseudo-elements in selectors
2.6         Multiple pseudo-elements
3         The cascade
3.1         'important' and 'legal'
3.2         Cascading order
4         Formatting model
4.1         Lists
4.2         Horizontal formatting
4.3         The canvas
5         CSS1 properties
5.1         Notation for property values
5.2         Font properties
5.2.1         Font encoding
5.2.2         'font-size'
5.2.3         'font-family'
5.2.4         'font-weight'
5.2.5         'font-style'
5.2.6         'line-height'
5.2.7         'font'
5.3         Color and background properties
5.3.1         'color'
5.3.2         'background'
5.4         Text properties
5.4.1         'word-spacing'
5.4.2         'letter-spacing'
5.4.3         'text-decoration'
5.4.4         'vertical-align'
5.4.5         'text-transform'
5.4.6         'text-align'
5.4.7         'text-indent'
5.5         Box properties
5.5.1         'margin-left', 'margin-right', 'margin-top', 'margin-bottom', 'margin'
5.5.2         'padding'
5.5.3         'border-top', 'border-right', 'border-bottom', 'border-left', 'border'
5.5.4         'width'
5.5.5         'height'
5.5.6         'float'
5.5.7         'clear'
5.6         Classification properties
5.6.1         'display'
5.6.2         'list-style'
5.6.3         'white-space'
6         Units
6.1         Length units
6.2         Percentage units
6.3         Color units
6.4         URL
7         Formatting tables
7.1         Addition to 'border' property
7.2         Additional property: 'elevation'
8         Formal grammar
9         CSS1 conformance
10        The applicability and extensibility of CSS1
11        References
12        Acknowledgments

Appendix A: Sample style sheet for HTML 2.0
Appendix B: Color Names

Terminology

author
the author of an HTML document
block-level element
an element which has a line break before and after (e.g. 'H1' in HTML)
canvas
the part of the UA's drawing surface onto which documents are rendered
context-sensitive selector
a selector that matches elements based on their position in the document structure. A context-sensitive selector consists of several simple selectors. E.g., the context-sensitive selector 'H1.initial B' consists of two simple selectors, 'H1.initial' and 'B'.
CSS
Cascading Style Sheets
CSS1
Cascading Style Sheets, level 1. This document defines CSS1 which is a simple style sheet mechanism for the web.
declaration
a property (e.g. 'font-size') and a corresponding value (e.g. '12pt')
designer
the designer of a style sheet
document
HTML document
element
HTML element
HTML
Hypertext Markup Language [2], an application of SGML.
HTML extension
Markup introduced by UA vendors, most often to support certain visual styles. The "FONT", "CENTER" and "BLINK" elements are examples of HTML extensions, as are the "BGCOLOR" attribute. One of the goals of CSS is to provide an alternative to HTML extensions.
inline element
an element which does not have a line break before and after (e.g. 'STRONG' in HTML)
property
a stylistic parameter that can be influenced through CSS. This specification defines a list of properties and their corresponding values.
reader
the person for whom the document is rendered
replaced element
an element which is replaced by content pointed to from the element. E.g., in HTML, the IMG element is replaced by the image pointed to by the SRC attribute.
rule
a declaration (e.g. 'font-family: helvetica') and its selector (e.g. 'H1')
selector
a string that identifies what elements the corresponding rule applies to. A selector can either be a simple selector (e.g. 'H1') or a context-sensitive selector (e.g. 'H1 B') which consists of several simple selectors.
SGML
Standard Generalized Markup Language [3], of which HTML is an application
simple selector
a selector that matches elements based on their type or attributes, e.g 'H1.initial'
style sheet
a collection of rules
tag
HTML tag, e.g. 'H1'.
UA
User Agent, often a "web browser" or "web client"
user
synonymous with "reader"
weight
the priority of a declaration
In the text of this specification, single quotes ('...') denote HTML and CSS excerpts.

1    Basic concepts

Designing simple style sheets is easy. One only needs to know a little HTML and some basic desktop publishing terminology. E.g., to set the text color of 'H1' elements to blue, one can say:

  H1 { color: blue }
The example above is a simple CSS rule. A 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 only tries to influence 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 selector is the link between the HTML document and the style, and all HTML tags are possible selectors. HTML tags are defined in the HTML specification [2], and the CSS1 specification defines a syntax for how to address them.

The 'color' property is one of around 35 properties that determine the presentation of an HTML document. The list of properties and their possible values is defined in this specification.

HTML authors only need to write style sheets if they want to suggest a specific style for their documents. Each User Agent (UA, often a "web browser" or "web client") will have a default style sheet that presents documents in a reasonable - but arguably mundane - manner. Appendix A contains a sample style sheet to present HTML documents as suggested in the HTML 2.0 specification.

1.1    Containment in HTML

In order for the style sheets to influence the presentation, the UA must be aware of their existence. Another W3C working draft, HTML3 and Style Sheets [4], describes how to link HTML with style sheets:

<HTML>
  <HEAD>
    <TITLE>title</TITLE>
    <LINK REL=STYLESHEET TYPE="text/css" 
      HREF="http://style.com/cool" TITLE="Cool">
    <STYLE TYPE="text/css">
      @import http://style.com/basic
      H1 { color: blue }
    </STYLE>
  </HEAD>
  <BODY>
    <H1>Headline is blue</H1>
    <P STYLE="color: green">While the paragraph is green.
  </BODY>
</HTML>
The example shows four ways to combine style and HTML: using the 'LINK' element to link an external style sheet, a 'STYLE' element inside the 'HEAD' element, an imported style sheet using the CSS '@import ...' notation, and a 'STYLE' attribute on an element inside 'BODY'. The latter option mixes style with content and one loses the corresponding advantages of traditional style sheets.

The 'LINK' element references alternative style sheets that the reader can select, while imported style sheets are automatically merged with the rest of the style sheet.

1.2    Grouping

To reduce the size of style sheets, one can group selectors in comma-separated lists:
  H1, H2, H3 { font-family: helvetica }
Similarly, declarations can be grouped:
  H1 { 
    font-weight: bold; 
    font-size: 12pt;
    line-height: 14pt; 
    font-family: helvetica; 
    font-style: normal
  }
In addition, some properties have their own grouping syntax:
  H1 { font: bold 12pt/14pt helvetica }
which is equivalent to the previous example.

1.3    Inheritance

In the first example, the color of 'H1' elements was set to blue. Suppose we have an 'H1' element with an emphasized element inside:
  <H1>The headline <EM>is</EM> important!</H1>
If no color has been assigned to 'EM', the emphasized "is" will inherit the color of the parent element, i.e. it will also appear in blue. Other style properties are likewise inherited, e.g. 'font-family' and 'font-size'.

Inheritance starts at the oldest ancestor, i.e. the top-level element. In HTML, this is the 'HTML' element which is followed by the 'BODY' element. In order to set a "default" style property, one can use 'BODY' as selector:

  BODY { 
    color: black;
    background: url(texture.gif) white;
  }

This will work even if the author has omitted the 'BODY' tag (which is legal) since the parser will infer the missing tag. The example above sets the text color to be black and the background to be an image. The background will be white if the image is not available. (See the description of the 'background' property for more on this.)

Some style properties are not inherited from the parent element to the child element. Most often it is intuitive why this is not the case. E.g., the 'background' property does not inherit, but the parent element's background will shine through by default.

Often, the value of a property is a percentage that refers to another property:

  P { font-size: 10pt }
  P { line-height: 120% }  /* relative to 'font-size', i.e. 12pt */

For each property that allows percentage values, it is defined what property it refers to. Children elements of 'P' will inherit the computed value of 'line-height' (i.e. 12pt), not the percentage.

1.4    Class as selector

To increase the granularity of control over elements, HTML3 [4][5] proposes a new attribute: 'CLASS'. All elements inside the 'BODY' element can be classed, and the class can be addressed in the style sheet:
<HTML>
 <HEAD>
  <TITLE>Title</TITLE>
  <STYLE TYPE="text/css">
    H1.punk { color: #00FF00 }
  </STYLE>
 </HEAD>
 <BODY>
  <H1 CLASS=punk>Way too green</H1>
 </BODY>
</HTML>

The normal inheritance rules apply to classed elements; they inherit values from their ancestors in the document structure.

One can address all elements of the same class by omitting the tag name in the selector:

  .punk { color: green }  /* all elements with CLASS green */
Only one class can be specified per selector. 'P.punk.rap' is therefore an invalid selector in CSS1. (Context-sensitive selectors, described below, can have one class per simple selector)

1.5    ID as selector

HTML3 also introduces the 'ID' attribute which is guaranteed to have a unique value over the document. It can therefore be of special importance as a style sheet selector, and can be addressed with a preceding '#':
  #z098y { letter-spacing: 0.3em }

  <P ID=z098y>Wide text</P>

1.6    Context-sensitive selectors

Inheritance saves CSS designers typing. Instead of setting all style properties, one can create defaults and then list the exceptions. To give 'EM' elements within 'H1' a different color, one may specify:

  H1 { color: blue }
  EM { color: red }
When this style sheet is in effect, all emphasized sections, within or outside 'H1' will turn red. Probably, one only wanted 'EM' elements within 'H1' to turn red and this can be specified with:
  H1 EM { color: red }
The selector is now a search pattern on the stack of open elements, and this type of selector is referred to as a "context-sensitive selector". Context-sensitive selectors consist of several simple selectors separated by white space (all selectors described up to now have been simple selectors). Only elements that match the last simple selector (in this case the 'EM' element) are addressed, and only so if the search pattern matches. Context-sensitive selectors in CSS1 look for ancestor relationships, but other relationships (e.g. parent-child) may be introduced in later revisions. In the example above, the search pattern matches if 'EM' is a descendant of 'H1', i.e. if 'EM' is inside an 'H1' element.
  UL LI    { font-size: small }    
  UL UL LI { font-size: x-small }
Here, the first selector matches 'LI' elements with at least one 'UL' ancestor. The second selector matches a subset of the first, i.e. 'LI' elements with at least two 'UL' ancestors. The conflict is resolved by the second selector being more specific due to the longer search pattern. See the cascading order (section 3.2) for more on this.

Context-sensitive selectors can look for tags, classes or ids:

  P.reddish .punk  { color: red }
  #x78y CODE       { background: blue }

This first selector matches all elements with class 'punk' that have an ancestor of element 'P' with class 'reddish'. The second selector matches all 'CODE' elements that are descendants of the element with 'ID=x78y'. Several context-sensitive selectors can be grouped together:

  H1 B, H2 B, H1 EM, H2 EM { color: red }
Which is equivalent to:
  H1 B { color: red }
  H2 B { color: red }
  H1 EM { color: red }
  H2 EM { color: red }

1.7    Comments

Textual comments in CSS style sheets are similar to those in the C programming language:

  EM { color: red }  /* red, really red!! */
Comments cannot be nested.

2    Pseudo-classes and pseudo-elements

In CSS1, style is normally attached to an element based on its position in the document structure. This simple model is sufficient for a wide variety of styles, but doesn't cover some common effects. The concept of pseudo-classes and pseudo-elements extend addressing in CSS1 to allow external information to influence the formatting process.

Pseudo-classes and pseudo-elements do not exist in the HTML source. Rather, they are inserted by the UA under certain conditions to be used for addressing in style sheets. They are referred to as "classes" and "elements" since this is a convenient way of describing their behavior, but UAs may choose to implement them differently.

Pseudo-elements are used to address sub-parts of elements, while pseudo-classes allow style sheets to differentiate between different element types.

2.1    Anchor pseudo-classes

User agents commonly display newly visited anchors differently from older ones. In CSS1, this is handled through pseudo-classes on the 'A' element:

  A:link { color: red }       /* unvisited link */
  A:visited { color: blue }   /* visited links */
  A:active { color: orange }  /* active links */
All 'A' elements with an 'HREF' attribute will be put into one of these groups (i.e. target anchors are not affected). UAs may choose to move an element from 'visited' to 'link' after a certain time.

The formatting of an anchor pseudo-class is exactly as if the class had been inserted manually.

Pseudo-classes can be used in context-sensitive selectors:

  A:link IMG { border: solid blue }

2.2    Typographical pseudo-elements

Some common typographic effects are associated not with structural elements but rather typographical items as formatted on the canvas. In CSS1, two such typographical items can be addressed through pseudo-elements: the first line of an element, and the first letter.

2.3    The 'first-line' pseudo-element

The 'first-line' pseudo-element is used to apply special styles to the first line as formatted on the canvas:

  <STYLE TYPE="text/css">
    P:first-line { font-style: small-caps }
  </STYLE>

  <P>The first line of an article in Newsweek.
On an text-based UA, this could be formatted as:
  THE FIRST LINE OF AN
  article in Newsweek.

(In the above example, the UA chose to replace small-caps text with capital letters since small-caps fonts were not available. Note that this specification does not describe how UAs should render documents when the necessary resources, e.g. colors and fonts, are not available.)

The fictional tag sequence in the above example is: "<P> <P:first-line> The first line of an </P:first-line> article in Newsweek.</P>". The 'first-line' end tag is inserted at the end of the first line as formatted on the canvas.

The 'first-line' pseudo-element can only be attached to a block-level element.

2.4    The 'first-letter' pseudo-element

The 'first-letter' pseudo-element is used for "initial caps" and "drop caps" which are common typographic effects. All normal properties 'first-letter' elements and the formatting should be accordingly. This is how you could make a dropcap initial letter span two lines:

<HTML>
 <HEAD>
  <TITLE>Title</TITLE>
  <STYLE TYPE="text/css">
   P              { font-size: 12pt }
   P:first-letter { font-size: 200%; vertical-align: -100%; float: left }
   SPAN           { text-transform: uppercase }
  </STYLE
 </HEAD>
 <BODY>
  <P><SPAN>The first</SPAN> few words of an article in The Economist.</P>
 </BODY>
</HTML>

(The 'SPAN' element is being proposed as a new character-level element for HTML3)

If an text-based UA supports the 'first-letter' pseudo-element (we do not expect them to), the above could be formatted as:

  ___
   | HE FIRST few words
   |of an article in the
  Economist..

The fictional tag sequence is: "<P> <SPAN> <P:first-letter> T </P:first-letter> he first </SPAN> few words of an article in the Economist. </P>". Note that the 'first-letter' pseudo-element tags abut the content (i.e. the initial character), while the 'first-line' pseudo-element start tag is inserted right after the start tag of the element they are attached to.

The UA defines what characters are inside the 'first-letter' element, e.g. if preceding punctuation is to be included, or what characters are to be defined as letters.

The 'first-letter' pseudo-element can only be attached to a block-level element.

2.5    Pseudo-elements in selectors

In a context-sensitive selector, pseudo-elements are only allowed in the last simple selector:

  BODY P:first-letter { color: purple }

Pseudo-elements can be combined with classes in selectors:

  P.initial:first-letter { color: red }

  <P CLASS=initial>First paragraph</A>

The above example would make the first letter of all 'P' elements with 'CLASS=initial' red.

2.6    Multiple pseudo-elements

Several pseudo elements can be combined:
  P { color: red; font-size: 12pt }
  P:first-letter { color: green; font-size: 200% }
  P:first-line { color: blue }
In this example, the first letter of each 'P' element would be green with a font size of 24pt. The rest of the first line (as formatted on the canvas) would be blue while the rest of the paragraph would be red. The fictional tag sequence is: "<P> <P:first-line> <P:first-letter> ... </P:first-letter> ... <P:/first-line> </P>".

Note that the 'first-letter' element is inside the 'first-line' element. Properties set on 'first-line' will be inherited by 'first-element', but are overridden if the same property is set on 'first-letter'.

Possibly, pseudo-elements influencing the same content can be set on different elements:

  BODY:first-letter { color: red }
  P:first-letter { font-size: 200% }

  <BODY><P>some text ...
The fictional tag sequence of the above example is "<BODY> <BODY:first-letter> <P> <P:first-letter> some text ..."

3    The cascade

In CSS, more than one style sheet can influence the presentation simultaneously. There are two main reasons for this feature: modularity and author/reader balance.
modularity
A style sheet designer can combine several (incomplete) style sheets to reduce redundancy:
  @import http://www.style.org/punk
  @import http://www.style.org/funk

  H1 { color: red }     /* override imported sheets */
author/reader balance
Both readers and authors can influence the presentation through style sheets. To do so, they use the same style sheet language thus reflecting a fundamental feature of the web: everyone can become a publisher. The UA is free to choose the mechanism for referencing personal style sheets.

Sometimes conflicts will arise between the style sheets that influence the presentation. Conflict resolution is based on each style rule having a weight. By default, the weights of the reader's rules are less than the weights of rules in the author's documents. I.e., if there are conflicts between the style sheets of an incoming document and the reader's personal sheets, the author's rules will be used. Both reader and author rules override UA's default values.

3.1    'important' and 'legal'

Style sheet designers can increase the weights of their rules:

  H1 { color: red ! important }
  P  { font-size: 12pt ! legal "IATA regulations" }
The '! legal ...' construct is used if there are legal reasons behind the rule, and the trailing string is a short textual reference to the corresponding statutes. 'Important' and 'legal' rules have the same weight.

An important (or legal) reader rule will override an author rule with normal weight. An important (or legal) author rule will override an important (or legal) reader rule.

The reference to the statutes should be displayed to the reader as a warning when the UA is not able to honor a legal rule. The reader should acknowledge the warning with an action, e.g. a mouse click. Situations where the warning should be displayed include:

In some cases, it is clear from the context that the rule cannot be honored and there is no need to warn the reader: One should also keep in mind that the UA may not be able to retrieve externally linked style sheets.

3.2    Cascading order

Conflicting rules are intrinsic to the CSS mechanism. To find the value for an element/property combination, the following algorithm should be followed:

  1. Find all declarations that apply to the element/property in question. Declarations apply if the selector matches the element in question. If no declarations apply, the inherited value is used.
  2. Sort the declarations by explicit weight: declarations marked '!important' or '!legal ..' carry more weight than unmarked (normal) declarations.
  3. Sort by origin: the author's style sheets override the reader's style sheet which override the UA's default values.
  4. Sort by specificity of selector: more specific selectors will override more general ones. To find the specificity, count the number of ID attributes in the selector (a), the number of CLASS attributes in the selector (b), and the number of tag names in the selector (c). Concatenating the three numbers (in a number system with a large base) gives the specificity. Some examples:
      LI            {...}  /* a=0 b=0 c=1 -> specificity =   1 */
      UL LI         {...}  /* a=0 b=0 c=2 -> specificity =   2 */
      UL OL LI      {...}  /* a=0 b=0 c=3 -> specificity =   3 */
      LI.red        {...}  /* a=0 b=1 c=1 -> specificity =  11 */
      UL OL LI.red  {...}  /* a=0 b=1 c=3 -> specificity =  13 */ 
      #x34y         {...}  /* a=1 b=0 c=0 -> specificity = 100 */ 
    
  5. Sort by order specified: if two rules have the same weight, the latter specified should live.

The search for the property value can be terminated whenever one rule has a higher weight than the other rules that apply to the same element/property combination.

This strategy gives author's style sheets considerably higher weight than those of the reader. It is therefore important that the reader has the ability to turn off the influence of a certain style sheet, e.g. through a pull-down menu.

A 'STYLE' attribute on an element (see section 1.1 for an example) should be considered as if an ID attribute had been specified at the end of the style sheet.

The UA may choose to honor other stylistic attributes (e.g. 'ALIGN') as if a 'STYLE' attribute had been used. When in conflict with other stylistic attributes, the 'STYLE' attribute should win.

4    Formatting model

This document suggests a simple box-oriented formatting model. Each block-level element (e.g. 'H1' and 'P', but not 'EM') is surrounded by a box. The size of the box is the sum of the element width (i.e. formatted text or image), the padding, the border and the margins:
    _______________________________________
   |                                       |
   |           margin (transparent)        |
   |   _________________________________   |
   |  |                                 |  |
   |  |        border                   |  |
   |  |   ___________________________   |  |
   |  |  |                           |  |  |
   |  |  |     padding               |  |  |
   |  |  |   _____________________   |  |  |
   |  |  |  |                     |  |  |  |
   |  |  |  |  content            |  |  |  |
   |  |  |  |_____________________|  |  |  |
   |  |  |___________________________|  |  |
   |  |_________________________________|  |
   |_______________________________________|

            |    element width    |

   |               box width               |

The size of the margin, border and padding are set with the 'margin', 'border' and 'padding' properties respectively. The padding area uses the same background as the element itself (set with the 'background' property). The color and style for the border is set with the 'border' property. The margins are always transparent, so the parent element will shine through.

The following example shows how margins and padding format a 'UL' element with two children. To simplify the diagram there are no borders.

    <STYLE TYPE="text/css">
      UL { 
        background: red; 
        margin: A B C D;      /* let's pretend we have constants in CSS1 */
        padding: E F G H;     /*                   "                     */
      }
      LI { 
        color: white;    
        background: blue;     /* so text is white on blue */ 
        margin: a b c d;      /* let's pretend we have constants in CSS1 */
        padding: e f g h;     /*                   "                     */
      }
    </STYLE>
    ..
    <UL>
      <LI>1st element of list
      <LI>2nd element of list
    </UL>
   _______________________________________________________
  |                                                       |
  |    A      UL margin (transparent)                     |
  |    _______________________________________________    |
  | D |                                               | B |
  |   |    E   UL padding (red)                       |   |
  |   |    _______________________________________    |   |
  |   | H |                                       | F |   |
  |   |   |    a   LI margin (transparent,        |   |   |
  |   |   |        so red shines through)         |   |   |
  |   |   |    _______________________________    |   |   |
  |   |   | d |                               | b |   |   |
  |   |   |   |    e    LI padding (blue)     |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   | h  1st element of list      f |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   |    g                          |   |   |   |
  |   |   |   |_______________________________|   |   |   |
  |   |   |                                       |   |   |
  |   |   |     max(a, c)                         |   |   | <- note the max
  |   |   |                                       |   |   |
  |   |   |    _______________________________    |   |   |
  |   |   |   |                               |   |   |   |
  |   |   | d |    e    LI padding (blue)     |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   | h  2nd element of list      f |   |   |   |
  |   |   |   |                               |   |   |   |
  |   |   |   |    g                          |   |   |   |
  |   |   |   |_______________________________|   |   |   |
  |   |   |                                       |   |   |
  |   |   |   c    LI margin (transparent,        |   |   |
  |   |   |        so red shines through)         |   |   |
  |   |   |_______________________________________|   |   |
  |   |                                               |   |
  |   |    G                                          |   |
  |   |_______________________________________________|   |
  |                                                       |
  |   C                                                   |
  |_______________________________________________________|

Technically, padding and margin properties are not inherited. But, as the example shows, the placement of an element is relative to ancestors and siblings.

If the border width had been set (the default value is '0'), the border would have appeared between the padding and the margins.

The width of the margins specify the minimum distance to the edges of surrounding boxes. In the example above, the margins between the two 'LI' elements are collapsed by taking the maximum of the two. Similarly, if the padding between the 'UL' and the first 'LI' element is zero (the "E" constant), the top elements' top margins should be collapsed.

4.1    Lists

Elements with a 'display' property value of 'list-item' are preceded by a label. The type of label is determined by the 'list-style' property. The label is not considered to be a part of the content, and will be placed outside the content. The rendering of the label should be based on the font and color properties of the element it belongs to.

4.2    Horizontal formatting

Seven length units influence the horizontal dimension of a box: left margin, left border, left padding, width, right padding, right border, right margin. Added up, these have to be equal to the width of the parent element. Therefore, one cannot specify values for all properties and expect them to be honored. The relative strengths between them are as follows:
  1. left border
  2. right border
  3. left padding
  4. right padding
  5. width
  6. left margin
  7. right margin
By default, the value of the 'width' property is 'auto' which means it will be automatically calculated based on the other properties' values. However, if 'width' is assigned another value, or the dimensions don't add up for other reasons, the property with the lowest rank will be assigned 'auto', i.e. automatically calculated.

4.3    The canvas

The canvas is the part of the UA's drawing surface onto which documents are rendered. No structural element of a document correspond to the canvas, and this creates two problems in the formatting process of CSS1: The latter issue is resolved with the 'fixed' value on the 'bg-style' property which tells the formatter to use the canvas instead of the element itself as reference.

The first issue is harder to resolve and has caused the authors of this specification much pain. There are two ideas: either the unfilled area is filled with the default background resource of the window system, or the background is "stolen" from a structural element. HTML extensions have taken the latter path: attributes on the 'BODY' element set the background of the whole canvas. To support designers' expectations, CSS1 introduces a special rule to find the canvas background:

If the 'background' value of the 'HTML' element is different from 'transparent' then use it, else use the 'background' value of the 'BODY' element. If the resulting value is 'transparent', the rendering is undefined.

This rule allows:

  <HTML STYLE="background: http://style.com/marble.png">
  <BODY STYLE="background: red">
In the example above, the canvas will be covered with "marble". The background of the 'BODY' element (which may or may not fully cover the canvas will be red.

Until other means of addressing the canvas become available, we recommend setting canvas properties on the 'BODY' element.

5    CSS1 properties

Style sheets influence the presentation of documents by assigning values to style properties. This section lists the defined style properties, and their corresponding list of possible values, of CSS1.

The list of CSS1 properties has been kept to a minimum, while making sure commonly used styles can be expressed. Depending on the formatting model and the presentation medium, some properties can prove hard to incorporate into existing UA implementations. According to the conformance rules, UAs should make efforts to format documents according to the style sheets, but full support for all properties cannot be expected. E.g., a text-based browser is not able to honor margins accurately, but should approximate.

5.1    Notation for property values

In the text below, the allowed values for each property are listed with a syntax like the following:

Value: N | NW | NE
Value: [ <length> | thick | thin ]{1,4}
Value: <url>? <color> [ / <color> ]?
Value: <url> || <color>

The words between < and > give a type of value. The most common types are <length>, <percentage>, <url>, <number> and <color>; these are described in the section on units. The more specialized types (e.g. <font-family> and <border-style>) are described under the property where they appear.

Other words are keywords that must appear literally. The slash (/) is also considered a keyword.

Several things juxtaposed mean that all of them must occur, in the given order. A bar (|) separates alternatives: one of them must occur. A double bar (A || B) means that either A or B or both must occur, in any order. Brackets ([]) are for grouping. 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 ]]".

Every type, keyword, or bracketed group may be followed by one of the following modifiers:

5.2    Font properties

Setting font properties will be among the most common uses of style sheets. Unfortunately, there exists no well-defined and universally accepted taxonomy for classifying fonts, and terms that apply to one font family may not be appropriate for others. E.g. 'italic' is commonly used to label slanted text, but the term is not appropriate for sans-serif fonts (whose slanted fonts are called 'oblique'). This specification suggests a liberal terminology for describing fonts, and a level of detail similar to common desktop publishing applications.

5.2.1    Font encoding

A font is assumed to come with a certain encoding, i.e., a table that maps characters to glyphs. CSS1 assumes that a suitable table exists; it has no provisions for changing that table. A "character" in this respect is an abstract notion, it is not the number or bit-pattern that is found in the document, nor is it the glyph that appears on the screen. It is something in between. In many documents the byte with number 65 will represent the character "A", which will then, subject to the character-to-glyph mapping, be represented as some "A"-like shape. In non-western languages the relation between bytes and the characters they represent is much more complex. So, CSS deals with characters, and whether a particular implementation represents an "A" internally by the number 65 or something completely different is of no concern here. The character-to-glyph table for each font has one entry for each possible character in an HTML document. Each entry is either empty, meaning that the font doesn't have a glyph for that character, or it points to a glyph.

Many fonts will only have glyphs for a few hundred characters. For example, fonts for western languages usually have some 200 glyphs. The fact that most encoding tables will be quite sparse has important consequences:

  <EM STYLE="font-family: Symbol">abcd</EM>

The example above has no effect whatsoever, since the four characters 'abcd' have no glyphs in the 'Symbol' font. Older browsers that work with 8-bit characters internally often fail to check the font encoding. Typically, the above fragment will show four Greek letters. Authors should not rely on this behavior.

5.2.2    'font-size'

Value: <length> | <percentage> | <number> | xx-small | x-small | small | medium | large | x-large | xx-large
Initial: medium
Applies to: all elements
Inherited: yes
Percentage values: relative to parent's font size

If the value is a number, it is interpreted relative to the parent element's font size. A scaling factor of 1.5 is suggested for a value of 1, but this could vary depending on the presentation medium and the fonts available. E.g, if 'font-size' is set to '-1', the font size should be the parent element's font size multiplied with (1/1.5).

A keyword value is an index to an absolute table kept by the UA. A scaling factor of 1.5 is suggested between adjacent indexes, e.g. if the 'medium' font is 10pt, the 'large' font could be 15pt.

Units that normally refer to the font size of the current element ('em' and 'ex'), refer to the font size of the parent element if used on 'font-size' itself.

Note that an application may reinterpret an explicit size, depending on the context. E.g., inside a VR scene a font may get a different size because of perspective distortion.

  P { font-size: 12pt; }        /* absolute size: be careful! */
  BLOCKQUOTE { font-size: -1 }
  EM { font-size: +1 }          /* the '+' is optional */
  EM { font-size: 150% }
  EM { font-size: 1.5em }
If the suggested scaling factor of 1.5 is used, the latter three rules are identical.

5.2.3    'font-family'

Value: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Initial: UA specific
Applies to: all elements
Inherited: yes
Percentage values: N/A

The value is a prioritized list of font family names and/or generic family names. Unlike most other CSS1 properties, values are separated by a comma to indicate that they are alternatives:

  BODY { font-family: gill, helvetica, sans-serif }
There are two types of list values:
<font-family>
The name of a font family of choice. In the last example, "gill" and "helvetica" are font families.
<generic-family>
In the example above, the last value is a generic family name. The following generic families are defined: Style sheet designers are encouraged to offer a generic font family as a last alternative.
Font names containing white space should be quoted:
  BODY { font-family: "new century schoolbook", serif }
  
  <BODY STYLE="font-family: 'My own font', fantasy">

If quoting is omitted, any white space characters before and after the font name is ignored and any sequence of white space characters inside the font name is converted to a single space.

Ideally, the style sheet designer should specify only one font, and the font manager should return the best alternative (perhaps by taking visual similarity, visual quality and performance into account). Unfortunately, current rendering environments do not offer this level of service, and it is beyond the style sheet mechanism to do so. Therefore, a prioritized list of alternative families can be supplied. This practice poses one problem: the UA must be able to determine if a font selection has been successful or not to know how far it should proceed in the list. One example: if the style sheet asks for 'univers' and the window system is smart enough to suggest 'helvetica' (which looks almost identical) as a replacement, is this a success or failure? This specification leaves the answer undefined for now.

5.2.4    'font-weight'

Value: extra-light | light | demi-light | medium | demi-bold | bold | extra-bold | <number>
Initial: medium
Applies to: all elements
Inherited: yes
Percentage values: N/A

If the value is a number, it is interpreted relative to the parent element's weight. A value of '1' suggests two jumps in the table corresponding to the keywords.

  P { font-weight: medium }
  B { font-weight: +1 }       /* the '+' is optional */
In the example above, 'B' elements will be two table position "bolder" than their parent. If they are children of an 'P' element, the resulting value is 'bold'. Non-integer font weights are allowed.

If the desired font weight is not available, the UA selects an approximation strategy.

5.2.5    'font-style'

Value: normal | italic || small-caps | oblique || small-caps | small-caps
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A

Legal combinations of the values are:

If the preferred font style cannot be accomplished, the UA should make best efforts to find acceptable substitutions. Often, an 'oblique' font can be substituted by an 'italic' font. If 'small-caps' are not available, capital letters of a smaller font size can be used to render small characters if the resolution of the output medium is appropriate for this.

  H1, H2, H3 { font-style: small-caps  italic }
  H1 EM { font-style: italic }
In the example above, emphasized text within 'H1' will appear in normal lower-case italic.

5.2.6    'line-height'

Value: <length> | <percentage>
Initial: see below
Applies to: all elements
Inherited: yes
Percentage values: refers to the font size of the element itself

The property refers to the distance between two adjacent lines' baselines.

If there is more than one element on a formatted line, the maximum 'line-height' will apply. One should therefore be careful when setting 'line-height' on inline elements.

Negative values are not allowed.

The two rules in the example below are identical:

  P { line-height: 1.2em; font-size: 10pt }
  P { line-height: 120%; font-size: 10pt }

5.2.7    'font'

Value: [<font-weight> || <font-style>]? <font-size> [ / <line-height> ]? <font-family>
Initial: not defined
Applies to: all elements
Inherited: yes
Percentage values: allowed on <font-size> and <line-height> only

This syntax of this property is based on a traditional typographic shorthand notation to set multiple properties related to fonts: 'font-style', 'font-weight', 'font-size', 'line-height' and 'font-family'. For a definition of allowed and initial values, see the previously defined properties. Setting the 'font' property is equivalent to including separate declarations at the same point in the style sheet. Properties left out of a 'font' specification are set to their initial value.

  P { font: bold 12pt/14pt sans-serif }
  P { font: 80% sans-serif }
  P { font: bold italic x-large/110% "new century schoolbook", serif }
In the second rule, the font size percentage value ('80%') refers to the font size of the parent element. In the last rule, the line height percentage refers to the font size of the element itself.

5.3    Color and background properties

5.3.1    'color'

Value: <color>
Initial: UA specific
Applies to: all elements
Inherited: yes
Percentage values: N/A

This property describes the text color of an element, i.e. the "foreground" color. There are different ways to specify red:

  EM { color: red }              /* natural language */
  EM { color: rgb(255,0,0) }     /* RGB rage 0-255   */

See section 6.3 for a complete description of possible color values.

5.3.2    'background'

Value: transparent | <color> [ / <color> ]? || <url> || <blend-direction> || <repeat> || <scroll> || <position>
Initial: transparent
Applies to: all elements
Inherited: no
Percentage values: N/A

This property describes the background of an element, i.e. the surface onto which the content (e.g. text) is rendered. The background can be one of:

Corresponding examples:
  P { background: transparent }                         /* transparent */
  BODY { background: red }                              /* one color */
  H1 { background: blue / red }                         /* blend two colors */
  BODY { background: url(chess.png) 50% repeat fixed }  /* img + controls */

This property does not inherit, but the parent element's background will shine through by default due to the initial transparent value. If neither an image or a color is found, a value of 'transparent' is assumed.

If an image is found through the URL, it will be overlaid on top of any color specified. The color (or color combination) is used:

<blend-direction>
If two colors have been specified, they will be blended according to the value of <blend-direction>. Legal values are [N | NW | W | SW | S | SE | E | NE]. If no value has been set, 'S' is assumed. The value specifies the direction of blending from the first color into the second color. The values are shorthands for north, north-west, west etc where 'N' is the top of the element's box, 'NW' is the upper left corner etc:
  TABLE { background: blue/green NW }

In the example above, the direction is set to 'NW' which gives a table that is blue in the bottom right corner and blending smoothly into green in the top left corner.

If <scroll> (described below) has a value of 'fixed', the colors will be blended over the canvas, not the element:

  BODY { background: blue/green fixed }
Here, the canvas would be blue at the top and green at the bottom.

If only one background color is specified, <blend-direction> is ignored.

<repeat>
If a background image has been specified, the value of <repeat> determines how/if the image is repeated. Legal values are [repeat | repeat-x | repeat-y | no-repeat]. If no value is set, 'repeat' is assumed, i.e. the image is repeated both horizontally and vertically.
  BODY { background: url(marble.png) repeat-x }
In the example above, the image will only be repeated horizontally. Similarly, a value of 'repeat-y' will repeat the image vertically.
><scroll>
If a background image has been specified, the value of <scroll> determines if it should be fixed with regard to the canvas or if it should scroll along with the content. Respectively, the possible values are [fixed | scroll]. If no value is specified, 'scroll' is assumed.
<position>

If a background image has been specified, the value of <position> specifies its initial position. Legal values are [<percentage> | left | center | right [ <percentage> | top | middle | bottom]?]. If no value is specified, '0% 0%' is assumed.

With a value pair of '0% 0%', the upper left corner of the image is placed in the upper left corner of the element. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the element. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the element.

If only one value is given, it sets both the horizontal and vertical offset of the background image. If two values are given, the horizontal position comes first.

If the background image is fixed with regard to the canvas (see the <scroll> value above), the image is placed relative to the canvas instead of the element. E.g.:

  BODY { 
    background: url(logo.png) fixed 100% 100%;
  } 

In the example above, the image is placed in the lower right corner of the canvas.

The keyword values are defined as follows:

  left   = 0%
  center = 50%
  right  = 100%

  top    = 0%
  middle = 50%
  bottom = 100%

5.4    Text properties

5.4.1    'word-spacing'

Value: normal | <length>
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A

The length unit indicates an addition to the default space between words. Values can be negative, but there may be implementation-specific limits. The UA is free to select the exact spacing algorithm. The word spacing may also be influenced by justification (which is a value of the 'align' property).

  H1 { word-spacing: 1em }
Here, the word-spacing between each word in 'H1' elements would be increased with '1em'.

5.4.2    'letter-spacing'

Value: normal | <length>
Initial: normal
Applies to: all elements
Inherited: yes
Percentage values: N/A

The length unit indicates an addition to the default space between characters. Values can be negative, but there may be implementation-specific limits. The UA is free to select the exact spacing algorithm. The letter spacing may also be influenced by justification (which is a value of the 'align' property).

  BLOCKQUOTE { letter-spacing: 0.1em }
Here, the word-spacing between each character in 'BLOCKQUOTE' elements would be increased with '0.1em'.

5.4.3    'text-decoration'

Value: none | [ underline | overline | line-through | blink ]+
Initial: none
Applies to: all elements
Inherited: no, but see clarification below
Percentage values: N/A

This property describes decorations that are added to the text of an element. If the element has no text (e.g. the IMG element in HTML) or is an empty element (e.g. "<EM></EM>"), this property has no effect.

Formatters should treat unknown values as 'underline'.

The color(s) required for the text decoration should be derived from the 'color' property value.

This property is not inherited, but children elements should match their ancestor. E.g., if an element is underlined, the line should span the child elements. The color of the underlining will remain the same even if descendant elements have different 'color' values.

  A:link, A:visited, A:active { text-decoration: underline }

The example above would underline the text of all active links.

We expect UA vendors to propose several new values on this property. Possibly, some of them may require parameters, and implementors should be prepared to parse values with a functional notation. See the section on Color units for an example of a functional notation.

5.4.4    'vertical-align'

Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Initial: baseline
Applies to: all elements
Inherited: yes
Percentage values: refer to the 'line-height' of the element itself

The property affects the vertical positioning of the element. One set of keywords is relative to the parent element:

'baseline'
align the baseline of the element with the baseline of the parent
'middle'
align the middle of the element with the baseline plus half the x-height of the parent
'sub'
subscript the element
'super'
superscript the element
'text-top'
align the top of the element with the top of the parent element's font
'text-bottom'
align the bottom of the element with the bottom of the parent element's font
Another set of properties are relative to the formatted line that the element is a part of:
'top'
align the top of the element with the tallest element on the line
'bottom'
align the bottom of the element with the lowest element on the line

Using the 'top' and 'bottom' alignment, unsolvable situations can occur where element dependencies form a loop.

Percentage values refer to the 'line-height' of the element itself. E.g., a value of '-100%' will lower the element to where the baseline of the next line should have been.

5.4.5    'text-transform'

Value: capitalize | uppercase | lowercase | none
Initial: none
Applies to: all elements
Inherited: yes
Percentage values: N/A
'capitalize'
uppercases the first character of each word
'uppercase'
uppercases all letters of the element
'lowercase'
lowercases all letters of the element
'none'
neutralizes inherited value.
The actual transformation in each case is human language and UA dependent.
  H1 { text-transform: uppercase }

The example above would put 'H1' elements in uppercase text.

5.4.6    'text-align'

Value: left | right | center | justify
Initial: UA specific
Applies to: block-level elements
Inherited: yes
Percentage values: N/A

This property describes how text is aligned within the element. The actual justification algorithm used is UA and human language dependent.

Example:

  DIV.center { text-align: center }
Since this property inherit, all block-level elements inside the 'DIV' element with 'CLASS=center' will be centered. Note that alignments are relative to the width of the element, not the canvas. If 'justify' is not supported, the UA will supply a replacement. Typically, this will be 'left' for western languages.

5.4.7    'text-indent'

Value: <length> | <percentage>
Initial: 0
Applies to: block-level elements
Inherited: yes
Percentage values: refer to parent's width

The property specifies indent that appears before the first formatted line. 'text-indent' may be negative. An indent is not inserted in the middle of an element that was broken by another (such as 'BR' in HTML).

Example:

 P { text-indent: 3em }

5.5    Box properties

See the formatting model (section 4) for examples on how to use the box properties.

5.5.1    'margin-left', 'margin-right', 'margin-top', 'margin-bottom', 'margin'

Value: [ <length> | <percentage> | auto ]{1,4} (for 'margin' property)
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to parent's width

These properties set the margin of an element: the 'margin' property sets the border for all four sides while the other properties only set their respective side.

For the 'margin' property, the four lengths apply to top, right, bottom and left respectively. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.

  BODY { margin: 2em } /* all margins set to 2em */
  BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
  BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

The 'margin' property is shorthand for setting 'margin-top', 'margin-right' 'margin-bottom' and 'margin-left' at the same place in the style sheet. These properties allow only one value. The last rule of the example above is equivalent to the example below:

  BODY {
    margin-top: 1em;
    margin-right: 2em;
    margin-bottom: 3em;
    margin-left: 2em;        /* copied from opposite side (right) */
  }

The margins express the minimal distance between the borders of two adjacent elements. See the formatting model (section 4) for an example.

When margin properties are applied to replaced elements (e.g. IMG), they express the minimal distance from the replaced element to any of the content of the parent element.

Negative margin values will enable interesting visual effects such as overlapping text. However, they will also complicate the formatting model, and we would like to gain more implementation experience before specifying one way or the other.

5.5.2    'padding'

Value: [ <length> | <percentage> | auto ]{1,4}
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: refer to parent's width

The property describes how much space to insert between the border and the content (e.g. text or image). The order is top, right, bottom, left. If there is only one value, it applies to all sides, if there are two or three, the missing values are taken from the opposite side.

The surface of the padding area is set with the 'background' property.

  H1 { background: white; padding: 1em } 

The example above sets a 1em padding on all sides. The 'em' unit is relative to the element's font.

Padding values cannot be negative. See the formatting model (section 4) for more on these properties.

5.5.3    'border-top', 'border-right', 'border-bottom', 'border-left', 'border'

Value: <border-width> || <border-style> || <url> || <color>
Initial: medium none
Applies to: all elements
Inherited: no
Percentage values: N/A

These properties set the border of an element: the 'border' property sets the border for all four sides while the other properties only set their respective side.

The border is drawn in the image pointed to by the URL. If no URL is specified, or when the image is not available, the color value is used.

If an image is found through the URL, it will be used as a texture (i.e. repeated throughout the border) to draw the border. The <color> value, if specified, is used:

If no <color> value is specified, the value of the 'color' property will take its place:
  P { 
    color: black; 
    background: white; 
    border: solid;
  }
In the above example, the border will be a solid black line.
<border-width>
Possible values are [thin | medium | thick | <length>]. If not specified, 'medium' is assumed.

The keyword widths are constant throughout a document:

  H1 { border: solid thick red }
  P  { border: solid thick blue }
In the example above, 'H1' and 'P' elements will have the same border width regardless of font size. To do relative width, the 'em' unit can be used:
  H1 { border: solid 0.5em }
<border-style>
Possible values are [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]. If no value is specified, 'none' is assumed.

The border styles mean:

none
no border is drawn (regardless of any <border-width>)
dotted
the border is a dotted line drawn on top of the background of the element
dashed
the border is a dashed line drawn on top of the background of the element
solid
the border is a solid line
double
the border is a double line drawn on top of the background of the element. The sum of the two single lines and the space between equals the <border-width> value.
groove
a 3D groove is drawn in colors based on the <URL> and/or the <color> value. To save colors and processing power, UAs may choose to ignore the image for this <border-style>
ridge
a 3D ridge is drawn in colors based on the <URL> and/or the <color> value. To save colors and processing power, UAs may choose to ignore the image for this <border-style>
inset
a 3D inset is drawn in colors based on the <URL> and/or the <color> value. To save colors and processing power, UAs may choose to ignore the image for this <border-style>
outset
a 3D outset is drawn in colors based on the <URL> and/or the <color> value. To save colors and processing power, UAs may choose to ignore the image for this <border-style>
If the element is 'inline' and spans several lines, the UA is free to render one border on each line, possibly with omitted edges.

5.5.4    'width'

Value: <length> | <percentage> | auto
Initial: auto
Applies to: all elements
Inherited: no
Percentage values: refer to parent's width

This property can be applied to text elements, but it is most useful with inline images and similar insertions. The width is to be enforced by scaling the image if necessary. When scaling, the aspect ratio of the image should be preserved if the 'height' property is 'auto'.

Example:

  IMG.icon { width: 100px }

See the formatting model (section 4) for a description of the relationship between this property and the margin and padding.

5.5.5    'height'

Value: <length> | auto
Initial: auto
Applies to: block-level and replaced elements
Inherited: no
Percentage values: N/A

This property can be applied to text, but it is most useful with inline images and similar insertions. The height is to be enforced by scaling the image if necessary. When scaling, the aspect ratio of the image should be preserved if the 'width' property is 'auto'.

Example:

  IMG.icon { height: 100px }
If applied to a textual element, the height can be enforced with e.g. a scrollbar.

5.5.6    'float'

Value: left | right | none
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A

This property is most often used with inline images.

With the value 'none', the element will be displayed where it appears in the text. With a value of 'left' ('right') the margin properties will decide the horizontal positioning of the image and the text will float on the right (left) side of the image. With a a value of 'left' or 'right', the element is treated as block-level (i.e. the 'display' property is ignored).

  IMG.icon { 
    float: left;
    margin-left: 0;
  }
The above example will place all IMG elements with 'CLASS=icon' along the left side of the parent element.

5.5.7    'clear'

Value: none | left | right | both
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A

This property specifies if elements allow floating elements (normally images) to the left or right. With 'clear' set to 'left', an element will be moved below any floating element on the left side. Example:

  H1 { clear: left }

5.6    Classification properties

These properties classify elements into categories more than they set specific visual parameters.

5.6.1    'display'

Value: block | inline | list-item | none
Initial: according to HTML
Applies to: all elements
Inherited: no
Percentage values: N/A

This property indicates if an element is inline (e.g. 'EM' in HTML), block-level (e.g. 'H1' in HTML), or a block-level list item (e.g. 'LI' in HTML). For HTML documents, the initial value will be taken from the HTML specification.

A value of 'none' turns the display of the element, including children elements and the surrounding box, off.

  P { display: block }
  EM { display: inline }
  LI { display: list-item }
  IMG { display: none }

The last rule turns the display of images off.

Note that HTML defines what elements are block-level (called "Block Structuring Elements" in [2]) and inline (called "Phrase Markup" in [2]), and this may be hardcoded into some UA implementations.

5.6.2    'list-style'

Value: [ disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none ] || <url>
Initial: none
Applies to: elements with 'display' property value 'list-item'
Inherited: yes
Percentage values: N/A

This property can be set on any element, and it will inherit normally down the tree. However, the 'list-style' will only be displayed on elements with a 'display' value of 'list-item'. In HTML this is typically the case for the 'LI' element.

  UL { list-style: disc }
  UL UL { list-style: circle }
  LI.square { list-style: square }
  OL { list-style: decimal }       /* 1 2 3 4 5 etc. */
  OL { list-style: lower-roman }   /* a b c d e etc. */
  
A URL value can be combined with any other value:
  UL { list-style: http://png.com/ellipse.png disc }
In the example above, the 'disc' will be used when the image is unavailable.

5.6.3    'white-space'

Value: normal | pre
Initial: according to HTML
Applies to: block-level elements
Inherited: yes
Percentage values: N/A

Declares how white space inside the element should be handled: the 'normal' way (where white space is collapsed) or as the 'PRE' element in HTML. This property may be hardcoded into UA implementations, and style sheet designers should be careful changing the initial values:

  PRE { white-space: pre }  /* initial value */

6    Units

6.1    Length units

There are two main types of length units: relative and absolute. Relative units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g. from a computer display to a laser printer). Percentage units (described below) and keyword values (e.g. 'x-large') offer similar advantages.

Child elements inherit the computed value, not the relative value:

  BODY {
    font-size: 12pt;
    text-indent: 3em;  /* i.e. 36pt */
  }
  H1 { font-size: 15pt }

In the example above, the 'text-indent' value of 'H1' elements will be 36pt, not 45pt.

The list of relative units include:

  H1 { margin: 0.5em }      /* ems, the height of the element's font */
  H1 { margin: 1ex    }     /* x-height, ~ the height of the letter 'x' */
  P  { font-size: 12px }    /* pixels, relative to canvas */
Pixel units, as used in the last rule, are relative to the resolution of the canvas, i.e. most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the UA should rescale pixel values. We are working on a more formal definition of the pixel unit.

Absolute length units have the same problem as the pixel unit: they are only useful when the physical properties of the output medium is known. The list of absolute units include:

  H1 { margin: 0.5in }      /* inches, 1in = 2.54cm */
  H2 { line-height: 3cm }   /* centimeters */
  H3 { word-spacing: 4mm }  /* millimeters */
  H4 { font-size: 12pt }    /* points, 1pt = 1/72 in */
  H4 { font-size: 1pc }     /* picas, 1pc = 12pt */

6.2    Percentage units

Percentage units are relative to a length unit, most often the 'font-size' of the element itself:

  P { line-height: 120% }   /* 120% of the element's 'font-size' */

Child elements inherit the computed value, not the percentage value.

6.3    Color units

A color is a either a color name or a numerical RGB specification. For a list of supported color names, see Appendix B.

  H1 { color: light red }  /* i.e. pink */
  H2 { color: dark blue }

The RGB color model is being used in numerical color specifications. There are different ways to specify red:

  EM { color: red }              /* natural language */
  EM { color: #F00 }             /* #RGB */
  EM { color: #FF0000 }          /* #RRGGBB */
  EM { color: rgb(255,0,0)       /* integer range 0 - 255 */
  EM { color: rgb(100%, 0%, 0%)  /* float range 0.0% - 100.0% */
To have room for other color models in the future, a functional notation is introduced in the latter two examples.

To ensure similar colors on different devices, numerical color values are in linear light and will require appropriate gamma correction.

6.4    URL

A Uniform Resource Locator (URL) is identified with a functional notation:

  BODY { background: url(http://www.bg.com/pinkish.gif) }
Partial URLs are interpreted relative to the source of the style sheet, not relative to the document:
  BODY { background: url(yellow) }
In absolute URLs the functional notation is optional:
  TABLE { background: http://www.bg.com/funkish }

7    Formatting tables

Note that this section is still under discussion and the model suggested is only one of several proposed.

It is possible to consider the rules as rules on the edge of something (cell, column, table, etc.), as rules between things, or as borders around things. Sometimes one model seems easier than another, but mixing models may not be the best solution.

In the HTML table model, there are 6 types of objects: table (table), row group (thead, tbody, tfoot), row (tr), column group (colgroup), column (col), cell (td, th). Only 3 of them correspond to well defined areas of the table (i.e., areas that you can draw a border around): table, row group, cell.

The others may or may not correspond to a visible area. The column and the row may contain cells that span other columns and rows. The same is true of column groups.

The three "regular" table elements (table, row group, cell) can have borders. Since these elements also nest inside each other, they could even have each their own border (and a margin/padding in between). However, it is not very intuitive to view tables as a three level nesting. It seems much easier to view the edge of the table as being the same edge as the edge of the cell at that point, so this is the model adopted in CSS1.

The most common case seems to be that the rules on the edges of "larger" groupings are not interrupted. ("Larger" in the sense of being ancestor in the nesting.) In other words: edges of the table or the row groups stretch uninterrupted from one table edge to another. The main exception is the case where the table itself has no visible border: that invisible border can be replaced by a visible border around a cell or a group.

Another way of looking at this is to note that it is usually the "heavier" borders that are uninterrupted. "Heavier" relates to the thickness of the rule or the style or maybe a combination of both: thick single lines seem to override thin single lines, double lines seem to override single lines, etc.

However, it's our impression that the rule about "heavier" edges is more often broken than the one about "larger" objects.

The observation that "larger" objects usually have uninterrupted borders, leads to a basic disambiguating rule that the border of a table is always drawn, the border of a row group only where it doesn't coincide with the table's border, and the cell borders are only drawn when they don't coincide with any row group's. The exception is the 'none' style, which is always overridden by any visible border.

Extending the rule to columns, column groups and rows can be as simple as stating that their borders are only drawn if they fall on edges with a 'none' style.

The observation that heavier rules are usually uninterrupted leads to a precedence based on border width and style.

The two methods can be combined: in case of a conflict between elements of the same type, the widest border wins. If the borders are the same width, "heavier" styles win.

The margin properties work normally for the table element, but they don't apply to row groups, rows, column groups, columns, and cells.

Padding applies normally to cells, but doesn't apply to any other table element.

7.1    Addition to 'border' property

<border-style> has two additional values: [blank | bevel].

The difference between styles 'none' and 'blank' is that 'none' can be overridden by "smaller" (child) elements, while 'blank' can't. Otherwise they look the same. They have no width, even if one is specified explicitly.

The <border-style> may be accompanied by the keyword 'override', in which case this style overrides a style set on a "larger" element (unless that also has the keyword 'override').

7.2    Additional property: 'elevation'

Value: <number>
Initial: 0
Applies to: all elements
Inherited: no
Percentage values: N/A

The number gives the position of the element relative to its parent in the z-direction (out of the screen, towards the viewer). The elevation of an element will only be visual if the element has a 3D border (i.e. 'bevel').

The number has no unit, but the effect is that an elevation of 1 results in a shadow/slope of 1 pixel.

The number is not inherited, but since it is a relative number, child elements will "inherit" the absolute elevation of their parent.

In tables, the interpretation is changed slightly. The elevation of the table elements col and colgroup is ignored. The elevations of the table, thead, tbody, tfoot and tr elements are used to compute the absolute elevation of the cells inside them, but are never visualized on their own. The elevation of the table element is used, however, to specify the elevation of the (3D) borders around cells.

Note: This means that it is not possible to get borders with different elevations in one table.

Note: If the border's width is insufficient for the amount of shadow, the border-width is silently increased.

8    Formal grammar

Following is the formal grammar for CSS1. The format is optimized for human consumption and some shorthand notation beyond yacc is used:
  *  : 0 or more
  +  : 1 or more
  ?  : 0 or 1
  |  : separates alternatives
  [] : grouping 
The productions are:
stylesheet
 : import* rule*
 ;
import
 : IMPORT_SYM URL			/* E.g., @import url(fun.css) */
 ;
unary_operator
 : '-' | '+'
 ;
        /*
         * The only operators in level 1 are slash, space and comma.
         * An expression `a b c, d e f' stands for a list
         * [[a,b,c],[d,e,f]]. Note that `a,b,c' is the list
         * [a,b,c], *not* [[a],[b],[c]].
         */
operator
 : '/' | ',' | /* empty */
 ;
property
 : IDENT
 ;
rule
 : selector [ ',' selector ]*
   '{' declaration [ ';' declaration ]* '}'
 ;
selector
 : simple_selector+ [ ':' pseudo_element ]?
 ;
        /*
         * A simple_selector is something like H1, PRE.FOO,
         * .FOO, etc., or it is an ID: #p004
         *
         * DOT_WO_WS is a `.' without preceding whitespace.
         * DOT_W_WS is a `.' with preceding whitespace.
         */
simple_selector
 : element_name pseudo_class? [ DOT_WO_WS class ]?
 | DOT_W_WS class
 | id_selector
 ;
element_name
 : IDENT
 ;
pseudo_class
 : LINK_PSCLASS
 | VISITED_PSCLASS
 | ACTIVE_PSCLASS
 ;
class
 : IDENT
 ;
pseudo_element
 : IDENT
 ;
id_selector
 : '#' IDENT
 ;
declaration
 : property ':' expr prio? 
 | /* empty */				/* Prevents syntax errors... */
 ;
prio
 : LEGAL_SYM STRING		 	/* !legal "with a reason" */
 | IMPORTANT_SYM	 		/* !important" */
 ;
expr
 : term [ operator term ]*
 ;
term
 : unary_operator?
   [ NUMBER | STRING | PERCENTAGE | LENGTH | EMS | EXS
   | LINES | IDENT | HEXCOLOR | URL | RGB ]
 ;

The following is the input to a lex/flex scanner:

%{
#include "constants.h"
/*
    The constants include definitions similar to the following:
    #define INCH (25.4 * MM)
    #define CM (10 * MM)
    #define MM 1
    #define PICA (12 * INCH/72 * MM)
    #define POINT (INCH/72 * MM)
*/
%}
%a 3000
%o 4000
urlchar		[a-zA-Z0-9:/_%~!@#$?*+{};.,|=`'-]
d		[0-9]
notnm		[^-a-zA-Z0-9]
nmchar		[-a-zA-Z0-9]|\\\.
nmstrt		[a-zA-Z]
w		[ \t\n]*
num		{d}+|{d}*\.{d}+
h		[0-9a-fA-F]
h3		{h}{h}{h}
h6		{h3}{h3}
h9		{h3}{h3}{h3}
ident		{nmstrt}{nmchar}*
%x COMMENT
%%
"/*"			{BEGIN(COMMENT);}
<COMMENT>"*/"		{BEGIN(INITIAL);}
<COMMENT>\n		{/* ignore */}
<COMMENT>.		{/* ignore */}
@import			return IMPORT_SYM;
@class			return CLASS_SYM;
@define			return DEFINE_SYM;
"!"{w}legal		{return LEGAL_SYM;}
"!"{w}important		{return IMPORTANT_SYM;}
{ident}			{yylval.sym = str2Symbol(yytext); return IDENT;}
\"[^"\n]*\"		|
\'[^'\n]*\'		{yylval.str = noquotes(yytext); return STRING;}
{num}			{yylval.num = atof(yytext); return NUMBER;}
{num}{w}"%"		{yylval.num = atof(yytext); return PERCENTAGE;}
{num}{w}pt/{notnm}	{yylval.num = atof(yytext) * POINT; return LENGTH;}
{num}{w}mm/{notnm}	{yylval.num = atof(yytext); return LENGTH;}
{num}{w}cm/{notnm}	{yylval.num = atof(yytext) * CM; return LENGTH;}
{num}{w}pc/{notnm}	{yylval.num = atof(yytext) * PICA; return LENGTH;}
{num}{w}inch/{notnm}	{yylval.num = atof(yytext) * INCH; return LENGTH;}
{num}{w}px/{notnm}	{yylval.num = atof(yytext) * pixelwd; return LENGTH;}
{num}{w}em/{notnm}	{yylval.num = atof(yytext); return EMS;}
{num}{w}ex/{notnm}	{yylval.num = atof(yytext); return EXS;}
":"link			{return LINK_PSCLASS;}
":"visited		{return VISITED_PSCLASS;}
":"active		{return ACTIVE_PSCLASS;}
"#"{h9}			|
"#"{h6}			|
"#"{h3}			{yylval.str = yytext; return HEXCOLOR;}
"url("[^\n)]+")"	{yylval.str = noquotes(yytext+3); return URL;}
[a-z]+":"[a-zA-Z~/.%0-9?#@=*_+,;!-]+	{yylval.str = yytext; return URL;}
"rgb("{num}%?,{num}%?,{num}%?")"	{yylval.str = yytext; return RGB;}
":"			return ':';
^"."|[ \t]+"."		return DOT_W_WS;
"."			return DOT_WO_WS;
"/"			return '/';
"+"			return '+';
"-"			return '-';
"{"			return '{';
"}"			return '}';
";"			return ';';
","			return ',';
"#"			return '#';
[ \t]+			{/* ignore whitespace */}
\n			{/* ignore whitespace */}
.			{yyerror("Illegal character");}

9    CSS1 conformance

A UA conforms to the CSS1 specification if it: The above conformance rules only describes functionality, not user interface.

10    The applicability and extensibility of CSS1

The goal of the work on CSS1 has been to create a simple style sheet mechanism for HTML documents. The current specification is a balance between the simplicity needed to realize style sheets on the web, and pressure from authors for richer visual control. CSS1 offers:

CSS1 does not offer: We expect to see extensions of CSS in several directions: We do not expect CSS to evolve into:

11    References

[1] The W3C resource page on web style sheets (http://www.w3.org/pub/WWW/Style)

[2] RFC 1866: Hypertext Markup Language - 2.0, (ftp://ds.internic.net/rfc/rfc1866.txt). The specification is also available in hypertext form (http://www.w3.org/pub/WWW/MarkUp/html-spec/html-spec_toc.html)

[3] ISO 8879. Information Processing - Text and Office Systems - Standard Generalized Markup Language (SGML), 1986.

[4] HTML3 and Style Sheets (http://www.w3.org/pub/WWW/TR/WD-style.html)

[5] HyperText Markup Language Specification Version 3.0 (http://www.w3.org/pub/WWW/MarkUp/html3/CoverPage.html) The draft has now expired

[6] The HTML3 table model (http://www.w3.org/pub/WWW/TR/WD-tables.html)

[7] T Berk, L Brownston, A Kaufman: A New Color-Naming System for Graphics Languages, IEEE CG&A, May 1982

[8] DSSSL (http://occam.sjf.novell.com:8080/dsssl/dsssl96) is a tree transformation and style language from the SGML community. Bert Bos has written some notes on Translating CSS to DSSSL (http://www.w3.org/pub/WWW/Style/css/css2dsssl.html)

[9] Frame-based layout via Style Sheets (http://www.w3.org/pub/WWW/TR/WD-layout.html)

[10] PNG (Portable Network Graphics) Specification (http://www.w3.org/pub/WWW/TR/WD-png.html)

12    Acknowledgments

During the short life of HTML, there have been several style sheet proposals to which this proposal is indebted. Especially the proposals from Robert Raisch, Joe English and Pei Wei were influential.

Through "www-style@w3.org" and other electronic media, these people have contributed: Kevin Hughes, William Perry, Benjamin Sittler, Tony Jebson, Paul Prescod, Evan Kirshenbaum, Scott Bigham, Glenn Adams, Scott Preece, Greg Watkins, Jon Smirl, Chris Lilley, Mandira Virmani, Jenny Raggett and Michael Seaton.

Also, thanks to Tim Berners-Lee, Vincent Quint, Cécile Roisin, Irène Vatton, Phill Hallam-Baker, Yves Lafon, Yves Bertot, Colas Nahaboo, Philippe Kaplan, Gilles Kahn, Terry Allen, Daniel Connolly, Roy Fielding, Henrik Frystyk Nielsen, James Clark, David Siegel, Thomas Reardon, Chris Wilson, Lydja Williams, Robert Cailliau and Stephen Zilles for constructive discussions.

Our special thanks goes to Dave Raggett for his encouragement and work on HTML3, including tables. Steven Pemberton has contributed extensively, and was also chair of the W3C Style Sheets workshop where many issues were resolved.

Appendix A: Sample style sheet for HTML 2.0

The following style sheet is written according to the suggested rendering in the HTML 2.0 specification. Some styles, e.g. colors, have been added for completeness.

  BODY { 
    margin: 1em;
    font-family: serif;
    background: white;
    color: black; 
    border: black;    /* used by the HR element */
  }

  H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV, 
  DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR { display: block }

  B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP, 
  IMG, SPAN { display: inline }

  LI { display: list-item }

  H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
  H5, H6 { margin-top: 1em }
  H1, H2, H4, H6 { font-weight: bold }
  H3, H5 { font-style: italic }

  H1 { font-size: xx-large; text-align: center }
  H2 { font-size: x-large }
  H3 { font-size: large }

  B, STRONG { font-weight: bold }
  I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
  PRE, TT, CODE, KBD, SAMP { font-family: monospace }

  PRE { white-space: pre }

  ADDRESS { margin-left: 3em }
  BLOCKQUOTE { margin-left: 3em; margin-right: 3em }

  UL, DIR { list-style: disc }
  OL { list-style: decimal }
  MENU { margin: 0 0 }
  LI { margin-left: 3em }

  DT { margin-bottom: 0 }
  DD { margin-top: 0; margin-left: 5em }

  HR { border-top: solid }        /* 'border-bottom' could also have been used */

  A:link { color: blue }          /* unvisited link */
  A:visited { color: red }        /* visited links */
  A:active { color: orange }      /* active links */

  /* setting the anchor border around IMG elements
     requires context-sensitive selectors */

  A:link IMG { border: 2px solid blue }
  A:visited IMG { border: 2px solid red }
  A:active IMG { border: 2px solid orange }

Appendix B: Color Names

This table lists color names supported by several current UAs. To ensure similar colors on different devices, the corresponding RGB values are in linear light. These will require gamma correction according to the output device; for illustration, corresponding values are given which may be suitable for PCs (and many workstations) and for Macs.

For further technical details see the Gamma Tutorial Appendix in the PNG specification [10].

Linear lightExamples
PCMac
RGBRGBRGB
aliceblue223240255240248255233245255
antiquewhite244213175250235215248226199
aqua025525502552550255255
aquamarine5525517012725521292255194
azure223255255240255255233255255
beige234234184245245220240240205
bisque255199143255228196255216173
black000000000
blanchedalmond255213158255235205255226185
blue002550025500255
blueviolet6651961384322610419214
brown985516542421351818
burlywood18812463222184135208158100
cadetblue2989919515816060126129
chartreuse5525501272550922550
chocolate166362210105301926911
coral2555520255127802559247
cornflowerblue337821710014923765116229
cornsilk255240184255248220255245205
crimson1841112202060205631
cyan025525502552550255255
darkblue00670013900105
darkcyan0676701391390105105
darkgoldenrod12462018413411158993
darkgray103103103169169169139139139
darkgreen0330010000650
darkkhaki1321233818918310716415771
darkmagenta6706713901391050105
darkolivegreen233868510747517121
darkorange25568025514002551060
darkorchid8371561535020412123184
darkred67001390010500
darksalmon209795023315012222311786
darkseagreen7113071143188143109163109
darkslateblue16116772611394031105
darkslategray61919477979214646
darkturquoise015916502062090186190
darkviolet77016814802111150193
deeppink255176255201472556114
deepskyblue013525501912550167255
dimgray363636105105105696969
dodgerblue2732553014425511110255
firebrick1163317834341501313
floralwhite255244223255250240255248233
forestgreen367334139341310513
fuchsia255025525502552550255
gainsboro184184184220220220205205205
ghostwhite240240255248248255245245255
gold255175025521502551990
goldenrod1819832181653220313512
gray565656128128128939393
green0560012800930
greenyellow10925561732554714425521
honeydew223255223240255240233255233
hotpink2553611925510518025569153
indianred158272720592921855757
indigo1705875013042095
ivory255255223255255240255255233
khaki22320368240230140233219106
lavender203203244230230250219219248
lavenderblush255223234255240245255233240
lawngreen5224801242520892510
lemonchiffon255244158255250205255248185
lightblue109177203173216230144200219
lightcoral22356562401281282339393
lightcyan192255255224255255211255255
lightgoldenrodyellow244244166250250210248248192
lightgreen7321973144238144110230110
lightgrey168168168211211211193193193
lightpink255121138255182193255155169
lightsalmon255915025516012225512986
lightseagreen31161053217817012150141
lightskyblue63159244135206250100186248
lightslategray48648311913615383101121
lightsteelblue113143188176196222148173208
lightyellow255255192255255224255255211
lime025500255002550
limegreen7158750205502318523
linen244223203250240230248233219
magenta255025525502552550255
maroon5600128009300
mediumaquamarine3415810510220517066185141
mediumblue001580020500185
mediumorchid127231681868521116051193
mediumpurple764218214711221911476204
mediumseagreen1111743601791133115277
mediumslateblue51352191231042388768230
mediumspringgreen02448402501540248122
mediumturquoise161651567220920440190184
mediumvioletred14816119921133177798
midnightblue224225251128876
mintcream234255244245255250240255248
mistyrose255199194255228225255216212
moccasin255199120255228181255216154
navajowhite255188109255222173255208144
navy0056001280093
oldlace251234203253245230252240219
olive56560128128093930
olivedrab38703107142357110814
orange25598025516502551350
orangered255140255690255370
orchid1814217321811221420376197
palegoldenrod219207105238232170230222141
palegreen8224682152251152119249119
paleturquoise111219219175238238147230230
palevioletred182427621911214720476114
papayawhip255221172255239213255232196
peachpuff255181126255218185255203159
peru1586112205133631859833
pink255137154255192203255168182
plum18691186221160221207129207
powderblue113192203176224230148211219
purple56056128012893093
red255002550025500
rosybrown1307171188143143163109109
royalblue1336194651052253469212
saddlebrown671411396919105376
salmon24456432501281142489378
sandybrown23197302441649623913361
seagreen6672446139872110553
seashell255234219255245238255240230
sienna9121616082451294820
silver137137137192192192168168168
skyblue63159213135206235100186226
slateblue3726158106902057055185
slategray4256731121281447693110
snow255244244255250250255248248
springgreen0255550255127025592
steelblue1558119701301803895153
tan16611968210180140192153106
teal05656012812809393
thistle177135177216191216200167200
tomato255321525599712556439
turquoise121921636422420834211189
violet2195821923813023823095230
wheat234188117245222179240208152
white255255255255255255255255255
whitesmoke234234234245245245240240240
yellow255255025525502552550
yellowgreen8415871542055012218523