[The purpose of this document is to keep track of ideas and suggestions related to the cascading style sheet proposal. It's a scratchpad, implementor's guide and discussion room in one. By the end of 1995, we hope the document has evolved into a an internet draft.]

Cascading Style Sheets: a draft specification

  1. Introduction
  2. Goals
  3. Containment
  4. Addressing
    1. Granularity
    2. Element grouping
    3. Classes
    4. Document-wide properties
    5. Context-sensitivity
  5. Properties
    1. Fonts
    2. Margins
    3. Background
    4. Additions
    5. Indentation, alignment, spacing ++
    6. Links
  6. Values
    1. Spatial
    2. Color
    3. Font sizes
    4. Font families
    5. Font styles
    6. Constraints and environment variables
    7. Arithmetic
    8. Constants/Variables
  7. Cascading order
  8. Shortcuts
    1. Vocabulary
    2. Grouping
  9. Terminology
  10. Acknowledgements

Introduction

The purpose of this document is to keep track of ideas and suggestions related to the cascading style sheet proposal. It's a scratchpad, implementor's guide and discussion room in one. Nothing here is finalized, but the document will evolve towards an internet draft. If your would like to contribute, you can send comments and ideas to the stylesheet mailing list (www-style@w3.org) or to the author of this document. For background material, see the page on HTML style sheets.

Goals

The most important goal is to come up with a style sheet language that authors (including the home page writer) feels comfortable writing. If we don't achive this, style sheets will not be widely deplayed on the web.

The appearance of the web can be improved by a style sheet mechanism that:

This document is a specification of a stylesheet mechanism that support these goals.

While the proposed style sheet mechanism is general enough to apply to all versions of HTML, it is being developed in conjunction with HTML3 and closely matches its design guidelines.

Containment

Style sheets are located in the proposed HTML3 STYLE element, or referenced through a LINK:
<HEAD>
  <TITLE>Title</TITLE>
  <STYLE notation=css>
  h1: font.faily = helvetica
  <STYLE>
  <LINK rel=stylesheet href="bill.style">
</HEAD>
Typically, a company-wide style sheet will reside in one location and be referenced through a LINK. The author may add style hints in the STYLE element. If conflicts arise, the hints inside STYLE will override those referenced through LINK.

[Discuss the author/reader balanced approach]

Addressing

Granularity

The attachment of style hints to content is based on HTML elements. Single HTML elements is the smallest addressable unit. This example sets properties for the P and the EM tag:
  P: font.family = helvetica
  EM: back.color = #F00

Element grouping

  h1, h2: font.family = helvetica
[Note that element groups replaces the previously proposed element regular expressions (h[12]: font.family = helvetica).]

Classes

To increase the granularity of vcontrol, HTML elements can be subclasssed:
  H1.punk: font.color = #0F0

  <H1 class = punk>Way too green</H1>
[The previously proposed H1[punk] notation has been dropped.]

Document-wide properties

[We need to sort out the legality and meaning of these:] Document-wide properties are set by dropping the addressing part of a hint. This example sets the size of the browser window:
  width = 500px
  height = 600px
While regular expressions are not fully supported in the style sheet notation, one can address all elements through an asterisk:
  *: font.family = helvetica
Dropping the addressing field completely will have the same effect:
  font.family = helvetica
[Caution: sometimes the two notations will mean different things, e.g:
  margin.left: 1cm
  *: margin.left: 2cm
The first sets the margin of the document to 1cm, the second sets the margin of all elements to 2 cm]

Context-sensitivity

It is useful to set style properties based on the context of the element. A typical example is making the first paragraph after a headline bold:
  /H1 P/: font.style = bold
The initial "/" indicates the start of a pattern search. The trailing "/" is optional. All property assignments are performed on the last element of the search pattern. Subclasses can be stpcified in the search pattern:
  /H1 P.ingress/: font.style = bold
The above examples are sequential patterns. Only top-level start tags are regarded in sequential search patterns.

By specifying a hierarchical search pattern, one can set properties based on the ancestors of an element. E.g., since headlines often are rendered in bold, one may want to assign a different color to the STRONG element within an headline:

  /H1(STRONG/: font.color = red
Class specifications are allowed in a search pattern.

[Should combinations of sequential and hierarchical patterns be allowed?]

Properties

[Clearly incomplete]

Fonts

  font.size            spatial, relative
  font.family          
  font.style           
  font.color           color
To allow for oversized big caps in headlines and initial caps (e.g dropdown) in body paragraphs:
  oversize.font
Example of use:
  H1: font.style = big caps
  H1: oversize.font.size += 3             # a la Netscape
  P:  font.style = initial dropped
  P:  oversize.font.size *= 4             # i.e. cover 4 line's height
  P:  oversize.font.style = sans & italic & bold
[We may want to allow for a more structured naming scheme for styles, e.g.:
  font.weight
  font.slant
]

Margin

Margins set the space around an element. The background will be the one of the document.
  margin.left          spatial
  margin.rigth         spatial
  margin.top           spatial
  margin.above         spatial

Indent

Margins set the space around an element. The background will be the one of the element.
  indent.left          spatial
  indent.rigth         spatial
  indent.top           spatial
  indent.above         spatial

  indent.first         (hmm)

Background

  back.color           color
  back.image           url
[Should we also support stipples, i.e. bitmaps that mask a foreground and background color? I think not since there is no accepted distribution formats available, and you can chive the same effects with a gif.]

Additions

[Here we start messing with the HTML and possibly the content. Be critical!]
  add.before
  add.after
Example:
  H1: add.before = 
  H1: add.after = 
[Is "add" a good word? text.header? enclosure.above? ]

Indentation, alignment, spacing ++

[There is some work to be done in this section]
  line.indent          (indentation for the first line, alternative is line.indent or margin.first)
  line.leading         (alternative names size, spacing)

  indent
  align
  width
  height

Links

[Some thinking left here]

Should link properties be attached to the anchor tag? This is in line with the rest of the proposal, but seems less than intuitive:

  A: font.color = #00F
  /H1(A/: font.color = #F00
Perhaps a separate property:
  html:  txtlink.color = #00F
Then, one could also set per element link properties:
  P: txtlink.color = #00F
  H1: txtlink.color = #F00
[Too much flexibility??]

Should one be able to set different values according to the type of link, e.g. text or image?

  P: text.link.color = #00F
  P: image.link.color = #0F0
  P: link.style = 3D
Will this mean we'll have to extend the language for each new media type that comes out?

Kevin proposes:

  txtlink.color = blue
  txtlink.color = blue < AGE / 7d < "Background Color"
  imglink.color = default
  imglink.size = 3px
  imglink.style may be line, bevel, default, none
  txtlink.style may be underline, double underline,
     inverse, default, none

List Numbering

Tony Jebson proposes:
*: numbering = on|off
*: number.style = arabic|lowerroman|upperroman|loweralpha|upperalpha
*: number.inherit = on|off

Values

Spatial

  inches (in)
  pixels (px)
  centimeters/millimeters (cm/mm)
  ems (em)
  ens (en)
  points (pt)
  characters(ch)
  picas (pa)

Color

By default, the RGB color model is being used. Other color models should be kept in mind for later extensions.

Different ways to specify red:

  EM: font.color = #F00
  EM: font.color = #FF0000
  EM: font.color = 255, 0, 0
  EM: font.color = 1.0, 0.0, 0.0

Font sizes

[needs clarification]

In addition to setting the font sixe with a spatial value, one can specify a number in the range 1-7.

  h1: font.size = 4
  h1: oversize.font.size += 2
[There should be a way for the user (only?) to set the array of fonts]

Font families

Prioritized list of font families:
  P: font.family = futura, helvetica  
Really, it's the job of the window system to find alternate fonts with similar properties if the most-wanted is not available. However, window systmes cannot be trusted for this job.

Font styles

A font style can be one or more of: (the list is grouped for overview purposes only)

[Clearly, there are mutually exclusive styles, but the grammar should not define those]

Example:

  P: font.style = bold & italic & underline & uppercase
The case styles would display text as follows:
	plain:      "John Smith studies at MIT."
	small caps: "john smith studies at mIT."
	big caps:   "John Smith Studies At MIT."
	lowercase:  "john smith studies at mit."
	uppercase:  "JOHN SMITH STUDIES AT MIT."
[surely, more styles will be added to this list. Will the term "style" conflict with "style sheet"?]

Constraints and environment variables

[very interesting, but potentially complex issue]

The following environemnent variables are available for use in style sheets:

The combination of constraints and environment variables can be quite interesting.

Set the left margin to be 1/10 of the widow width, but always more than 2em and less than 20em:

  html : margin.left =  2em < WIDTH/10 < 20em 
Let the color of the background fade frow white to yellow as the document ages. After two days (2d), the fading process is complete:
  html : color.background = white < AGE/2d < yellow
Let the color of text links change from re to blue as the document loads:
  html : text.link = red < FETCHED < blue

Arithmetic

Addition, substraction, multiplication and division supported. Note how other element values are referenced:
  h2: font.size = h1[font.size] * 0.8
  P : font.size = H1.foo[font.size] - 12 pt
[What's the best notation for referencing other values? Previously, this document suggested: "H1.foo:font.size]"]

The notation for setting relative values:

  h1: font.size = 4
  h1: oversize.font.size += 2

Constants/Variables

Kevin proposes:
  define "My Gray" "191, 191, 191"
  P : font.color = "My Gray"
This would be a simple and workable scheme. What do we gain from going one step further and introduce variables?

Cascading order

Both readers and authors may use the style sheet language to specify preferences (the style sheet specified in -- or referenced from -- the inital document becomes the personal preferences of the reader). In most cases, the reader will be happy to accept the style hints from the author, but human or technologial handicaps may require the overriding of the author's hints.

When the indicated preferences conflict, the style sheet mechanism needs a way to resolve the disagreement. In this propoasl, both the reader and the author can indicate weight behind their preferences:

  font.family = helvetica ! important
  font.color = black ! insist
[Bill proposes using a standard notation for the priority, e.g. "h1: font.family=courier ; priority=insist"] In the end -- if the conflict escalates -- the reader should have the last word.

The list below indicates the hierarchy of style hints:


  reader lens               used for interactive control, e.g. "zoom in"

  reader insist             e.g. to compensate for handicap

  author important/insist   to indicate special weight
  reader important

  author normal             default weight, no tagging needed
  reader normal             taken from initial document

  application default       hardcoded fallback values

In addition to the important and insist tags, the legal tag indicates that there are legal reasons for the choice of styles, e.g. a font size requirement.

Example:

  P: font.size = 12pt ! legal
[Discuss the weight assigned to the "legal" tag. Basic strategy: give high weight if the request is reasonable, but "pink" is never a legal requirement.]

The browser should warn the reader when style hints tagged "legal" are overridden and this isn't clear from the context. Contexts where this should be clear:

One should also keep in mind that:

In general, the HTML3
banner area is a better place to put legal information.

Shortcuts

Vocabulary

The style sheet mechanism should be liberal in accepting alternative names, e.g. to shorthen the length of a style specification. Also, people come to the web from different platforms and bring vith them different vocabularies.
term    alternates

image : img
back  : background, bg 
fore  : foreground, fg
pt    : point, points
pa    : pica, picas

etc.

Grouping

As descibed above, elements grouped to reduce typing and bandwidth. Also, each element (group) can take several value assignements:
  h1: font.size = 12pt; back.color = #F00
  h1, h2: font.family = helvetica; font.size = 12pt

Terminology

reader: 
author: 
style sheet:
property:
element:
document:
value:
hint:

Acknowledgements

This document is based on active input from: Also, style sheet proposals from the following people have been influential:
This document is herded by Håkon Lie