W3C: WD-style-960710

HTML3 and Style Sheets

W3C Working Draft 10-Jul-1996

This version:
http://www.w3.org/pub/WWW/TR/WD-style-960710
Latest version:
http://www.w3.org/pub/WWW/TR/WD-style
Authors:
Bert Bos <bert@w3.org>,
Dave Raggett <dsr@w3.org>,
Håkon Lie <howcome@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 working drafts can be found at: http://www.w3.org/pub/WWW/TR

Note: since working drafts are subject to frequent change, you are advised to reference the above URL, rather than the URLs for working drafts themselves.

Abstract

The HyperText Markup Language (HTML) is a simple markup language used to create hypertext documents that are portable from one platform to another. HTML documents are SGML documents with generic semantics that are appropriate for representing information from a wide range of applications. This specification extends HTML to provide support for style rules expressed in separately specified notations. It is no longer necessary to extend HTML when new styles are needed. Style rules can be (a) included with individual HTML elements to which they apply, (b) grouped together in the document head, or (c) placed in associated style sheets. This specification does not specify particular style sheet notations, leaving that to other specifications.

Contents

Associating HTML documents with Style Sheets

There are several approaches for associating HTML documents with separate style sheets:

User applied style sheets
The user agent may provide the means for users to select and apply style sheets.

Implicit associations
The appropriate style sheet may be implied by the URL or other information describing the resource. This approach allows style sheets to be retrieved in advance of, or at the same time as, the HTML document itself. Implicit associations are not defined in this report.

Explicit associations
The author can specify one or more alternative style sheets for an HTML document using one of the methods described below.

In HTML it is also possible to put style sheets in-line in the document. HTML is extended with a new element and a new attribute (both called STYLE), as described below. No matter how style is associated with HTML, the user should be made aware that a particular style has been applied and should have the option of turning it off.

To make it easier to apply a style to parts of a document, two new elements for use in the body of an HTML document are defined: DIV and SPAN. The first is to enclose a division (chapter, section, etc.) of a document, making it possible to give a whole section a distinctive style. The latter is used within paragraphs, similarly to EM, but in cases where none of the other HTML elements (EM, STRONG, VAR, CODE, etc.) apply.

Media dependencies

Styles may often be designed for a restricted range of media, e.g. for graphical user interfaces with scalable fonts and millions of colors; for A4 paper media; for speech output; or for simple terminals with one monospace font. This proposal doesn't provide an explicit means to state the conditions under which a given style sheet is applicable.

Style sheet notations may themselves provide support for media dependencies. Another approach is to use a generic URL to reference a style sheet, and to make the binding to a specific URL according to the media required.

The LINK element

In HTML, the LINK element is used to create a typed hyperlink between the document and some other resource. The REL attribute defines the type of the link. With REL=stylesheet, the LINK element can be used to link to a style sheet.

Authors can use LINK elements to offer readers a choice of style sheets, e.g:

    <LINK TITLE="Old" REL=stylesheet HREF="old.style" TYPE="application/dsssl">
    <LINK TITLE="New" REL=stylesheet HREF="new.style" TYPE="application/rtf">
    <LINK TITLE="Wacky" REL=stylesheet HREF="wacky.style" TYPE="text/css">
    <TITLE>ACME Widgets Corp</TITLE>

    <H1>ACME Widgets Corp</H1>
    <P>If your browser supports style sheets, try our new look
    in old, new and wacky styles.
    
    ...

This specification builds upon the definition of the LINK element in HTML 2.0 (RFC 1866) in the following respects:

    <!ELEMENT LINK - O EMPTY>
    <!ATTLIST LINK
        href    CDATA     #REQUIRED  -- Uniform Resource Locator --
        title   CDATA     #IMPLIED   -- advisory title string --
        rel     CDATA     #IMPLIED   -- forward link relation --
        rev     CDATA     #IMPLIED   -- reverse link relation --
        type    CDATA     #IMPLIED   -- advisory Internet media type --
        >

Note that link relations given with REL and REV attributes may form comma separated lists. This may be exploited in future revisions to this specification to describe media dependencies etc. For now though, only REL=stylesheet is permitted for use in linking to style sheets.

The STYLE element

This allows authors to include style information within the HTML document. One or more STYLE elements may be included in the document HEAD and BODY. The STYLE element requires a start and end tag, e.g.

    <HEAD>
    <TITLE>Title</TITLE>
    <STYLE TYPE="text/css">
      H1 { color: brown }
      P  { color: blue  }
    </STYLE>
    </HEAD>

The STYLE element is formally defined by:

    <!ELEMENT style - - CDATA>
    <!ATTLIST style
        type     CDATA    #IMPLIED  -- Internet media type for style --
        title    CDATA    #IMPLIED  -- advisory title for this style --
        >

The attributes are defined as follows:

TYPE
This attribute defines the style notation as an Internet Media type including associated parameters. It is used in the same way as with LINK elements. The type applies to style rules in the STYLE element as well as those attached with the STYLE attribute.

TITLE
The user agent is recommended to use the title string when building a menu of alternative style sheets. This will only happen if the STYLE element occurs together with linked style sheets as specified by one or more LINK elements. In the absence of such LINK elements, the TITLE attribute may be used to describe the style sheet for the purpose of allowing the user to turn style sheets on and off.

The content model for the STYLE element is defined as CDATA. In this kind of element, only one delimiter is recognized by a conforming parser: the end tag open (ETAGO) delimiter (i.e. the string "</"). The recognition of this delimiter is constrained to occur only when immediately followed by an SGML name start character ([a-zA-Z]). All characters which occur between the STYLE start tag and the first occurrence of ETAGO in such a context must be provided to the appropriate style sheet mechanism.

Note that all other SGML markup (such as comments, marked sections, etc.) appearing inside a STYLE element are construed to be actual character content of the STYLE element and not parsed as markup. A particular style sheet language may choose to treat such markup as it wishes; however such treatment should be documented.

When the STYLE element occurs together with one or more LINK elements that specify linked style sheets, the user agent should consider the STYLE element in preference to the LINK elements. The rendering implied by the STYLE element is independent of such LINK elements, i.e. it is not cascaded with style sheets specified by LINK elements.

Downlevel browsers

Authors may wish to design their HTML documents to be viewable on older browsers that don't recognise the STYLE element. Unfortunately any style statements placed within a STYLE element will be visible to users. Some style sheet languages such as CSS allow the style statements to be enclosed in an SGML comment, for instance:

    <STYLE TYPE="text/css">
     <!--
      H1 { color: red }
      P {color: blue }
       -->
    </STYLE>

Note that for user agents conforming to this specification, the comment is interpreted by the application and not the SGML parser.

Netscape Navigator 2.0 and above hides the contents of style elements provided no (non-white) text occurs before the element, except within the TITLE element.

Default Style Sheet Language

The default style sheet language can be specified by by a META element in the document HEAD, for example:

    <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

where the CONTENT attribute specifies the media type for the style sheet language, and the HTTP-EQUIV attribute is the literal string "Content-Style-Type". If there are several such META elements, then the last one determines the default style sheet language.

In the absence of such a META element, the default can be set by a Content-Style-Type HTTP header in the server response, for example:

    Content-Style-Type: text/css

If there are several such headers, the last one takes precedence over earlier ones. In the absence of either a META element or an HTTP header, the default scripting language type is assumed to be CSS.

Common attributes

To support effective use of style sheets with HTML documents a number of common attributes are proposed. These can be used with most HTML elements. In general, all attribute names and values in this specification are case insensitive, except where noted otherwise.

<!ENTITY % style
       "id      ID       #IMPLIED  -- document wide unique id --
        class   CDATA    #IMPLIED  -- comma list of class values --
        style   CDATA    #IMPLIED  -- associated style info --">
ID
Used to define a document-wide unique identifier. This can be used for naming positions within documents as the destination of a hypertext link. It may also be used by style sheets for rendering an element in a unique style. An ID attribute value is an SGML NAME token. NAME tokens are formed by an initial letter followed by letters, digits, "-" and "." characters. The letters are restricted to A-Z and a-z.
CLASS
A comma separated list of class names. CLASS names specify that the element belongs to the corresponding named classes. These may be used by style sheets to provide class dependent renderings. Note that white space characters are permitted within class names, and that one or more contiguous white space characters should be treated as the same as a single space character (decimal 32).

For example:

<P CLASS="warning">Turn off the electrical power before
unscrewing this plate. Failure to do so may result in a
severe electrical shock.
STYLE
A text string providing rendering information specific to this element. The notation should be specified as described in the previous section.

For example:

<TITLE>Test Document</TITLE>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<P STYLE="color: red; font-style: small-caps">This text
should be in small capitals and colored red!

The SPAN element

    <!ELEMENT span O O (%text)*>
    <!ATTLIST span
            %style;     -- id, class, style --
            >

Sometimes it is desirable to apply a style to some text which doesn't have a structural role or established rendering convention. For instance, the first few words of an article may be rendered as small capital letters ("small-caps"). In such situations it is inappropriate to use an existing tag such as EM: on existing user agents the first few words would be mysteriously italicized. The new SPAN tag is recommended instead, as it has no effect on existing user agents.

An example based on CSS:

    <TITLE>Title</TITLE>
    <STYLE TYPE="text/css">
    SPAN { font-style: small-caps }
    </STYLE>
    <P><SPAN>The first</SPAN> few words of
    this article are in small-caps.

This would be formatted to look something like:

    THE FIRST few words of this 
    article are in small-caps.

While on an existing user agent it would look like:

    The first few words of this
    article is small-caps.

The SPAN element can be used anywhere that the HTML EM element is allowed.

The DIV element

    <!ELEMENT div - - (%body.content)*>
    <!ATTLIST div
            %style;     -- id, class, style --
            >

The DIV element is used with the CLASS attribute to represent different kinds of containers, e.g. chapter, section, abstract, or appendix. DIV allows the enclosed group of elements to be given a distinctive style. For example:

    <DIV CLASS=Abstract>
    <P>The Chieftain product range is our market winner for
    the coming year. This report sets out how to position
    Chieftain against competing products.

    <P>Chieftain replaces the Commander range, which will
    remain on the price list until further notice.
    </DIV>

The DIV element can be used anywhere that the HTML P element is allowed. The content model for DIV allows headers, lists, paragraphs as well as other DIV elements etc. This allows DIVs to be nested, to form hierarchies of chapters, sections, and subsections etc.

User interface and user supplied style sheets

In an interactive user agent, the user should be made aware that a particular style sheet has been applied, and be given the option of turning it off or selecting a different style. A flag in the corner of the window and a toggle in a menubar can be sufficient.

It may be possible for the user to combine several of the available style sheets. It should be possible for the user to choose a personal style instead of, or in combination with, style sheets supplied by the author.

Performance issues

Some people have voiced concerns over performance issues for style sheets. For instance, fetching a LINKed style sheet may delay the full presentation for the user. A similar situation arises if the document head includes a lengthy set of style rules.

The current proposal sidesteps these issues by allowing authors to include rendering instructions within each HTML element. The rendering information is then always available by the time the user agent wants to render each element.

In many cases, authors will take advantage of a common style sheet for a group of documents. In this case, distributing style rules throughout the document will actually lead to worse performance than using a linked style sheet, since for most documents, the style sheet will already be present in the local cache. The public availability of good style sheets will encourage this effect.

References

W3C is working on a new version of HTML with the features described in this specification. See http://www.w3.org/pub/WWW/MarkUp for the current status of this work.

RFC 1866
"Hypertext Markup Language - 2.0" by T. Berners-Lee & D. Connolly, November 1995. This document can be downloaded from ftp://ds.internic.net/rfc/rfc1866.txt.
RFC 1766
"Tags for the Identification of Languages", by H. Alvestrand, UNINETT, March 1995. This document can be downloaded from ftp://ds.internic.net/rfc/rfc1766.txt.
CSS
"Cascading style sheets" by Håkon Lie & Bert Bos, December 1995. The latest version of this document can be downloaded from http://www.w3.org/pub/WWW/TR/WD-css1.html

W3C: The World Wide Web Consortium: http://www.w3.org/