W3CWD-style-970324


HTML and Style Sheets

W3C Working Draft 24-Mar-97

This version:
http://www.w3.org/pub/WWW/TR/WD-style-970324
Latest version:
http://www.w3.org/pub/WWW/TR/WD-style
Authors:
Dave Raggett <dsr@w3.org>
Bert Bos <bert@w3.org>
Håkon Lie <howcome@w3.org>

Status of This Document

This draft is work under review by the W3C HTML Working Group, for potential incorporation in an upcoming version of the HTML specification, code named Cougar. Please remember this is subject to change at any time, and may be updated, replaced or obsoleted by other documents. 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. This is work in progress and does not imply endorsement by, or the consensus of, either W3C or members of the HTML working group. Further information about Cougar is available at http://www.w3.org/pub/WWW/MarkUp/Cougar/.

Please send detailed comments to www-html-editor@w3.org. We cannot garantee a personal response, but summaries will be maintained off the Cougar page. Public discussion on HTML features takes place on www-html@w3.org. To subscribe send a message to www-html-request@w3.org with subscribe in the subject.

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

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.

Contents

Basic Concepts

This specification proposes extensions to HTML with support for the following features:

Flexible placement of Style Information
Placing style sheets in separate files makes them easy to reuse. Sometimes its useful to include rendering instructions within the document to which they apply, either grouped at the start of the document, or in attributes of the elements throughout the body of the document. To make it easier to manage style on a site basis, this specification describes how to use HTTP headers to set the style sheets to be applied to a document.
Independence from specific style sheet languages
This specification doesn't tie HTML to any particular style sheet language. This allows for a range of such languages to be used, for instance simple ones for the majority of users and much more complex ones for the minority of users with highly specialized needs. The examples included below all use the CSS (Cascading Style Sheets) language, but other style sheet languages would be possible.
Cascading Style Sheets
This is the capability provided by some style sheet languages such as CSS to allow style information from several sources to be blended together. For instance, corporate style guidelines, styles common to a group of documents, and styles specific to a single document. By storing these separately, style sheets can be reused, simplifying authoring and making more effective use of network caching. The cascade defines an ordered sequence of style sheets where rules in later sheets have greater precedence than earlier ones. Not all style sheet languages support cascading.
Media Dependencies
HTML allows you to specify documents in a media independent way. This allows people to access Web pages using a wide variety of devices and media, e.g. graphical displays for windows, macs, and X11, set-top boxes for television sets, specially adapted phones and pda based portable devices, speech-based browsers, and braille-based tactical devices.

Style sheets, by contrast, apply to specific media or media groups. A style sheet intended for screen use, may be applicable when printing, but is of little use for speech-based browsers. This specification allows you to define the broad categories of media a given style sheet is applicable to. This allows user agents to avoid retrieving inappropriate style sheets. Style sheet languages may include features for describing media dependencies within the same style sheet.

Alternative Styles
Authors may wish to offer readers several alternative styles for viewing a document. For instance, a compact version with small fonts, and one with larger fonts for increased legibility. This specification allows you to specify such alternatives, including which one is the default. Users should be given the opportunity of selecting between these styles or switching off style sheets altogether.

Introduction to <LINK>, <STYLE> and STYLE=

The following introduces the mechanisms used by HTML to associate HTML documents with style sheets. Further details are given later on with the formal description of the elements.

The LINK element allows you to reference a style sheet in a separate file, e.g.

    <HEAD>
    <LINK REL=stylesheet HREF="housestyle.css">
    ...

The HREF attribute gives a URL for the style sheet. The REL attribute is used to indicate that the LINK is to a style sheet. The STYLE element is used when you want to include a style sheet as part of the document. It's restricted to the document's HEAD, but you can use as many STYLE elements as you need.

    <STYLE TYPE="text/css">
        p { font-size: 12pt }
    </STYLE>

The TYPE attribute defines style sheet language. For style properties for a given element, you can specify them directly with the element using the STYLE attribute, e.g.

    <P STYLE="font-size: 12pt; color: rgb(0, 0, 100)">How do
        you like this text style?

Properties defined in this way always apply, and have higher precedence than those defined in style sheets. The style sheet language can be set with the META element, e.g.

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

The default style sheet language can also be set by HTTP headers, e.g.

    Content-Style-Type: text/css

If there are more than one such element or corresponding HTTP header, then the last one takes precedence over earlier ones. HTTP headers are considered as occuring earlier than the document HEAD for this purpose. In the absence of either a META element or an HTTP header, as a last resort, the default style sheet language type is assumed to be "text/css". It is recommended that authoring tools generate a META element to prevent this situation from occurring.

To define a cascade, you simply provide more than one LINK or STYLE elements, e.g.

    <LINK REL=stylesheet HREF="corporate.css">
    <LINK REL=stylesheet HREF="techreport.css">
    <STYLE TYPE="text/css">
        p.special { color: rgb(230, 100, 180) }
    </STYLE>

The elements are cascaded in the order they appear in the HEAD. A cascade can include style sheets applicable to different media. The user agent is then responsible to filtering out those style sheets which are inapplicable to the current situation.

    <LINK REL=stylesheet MEDIA=print HREF="corporate-print.css">
    <LINK REL=stylesheet MEDIA=screen HREF="corporate-screen.css">
    <LINK REL=stylesheet HREF="techreport.css">
    <STYLE TYPE="text/css">
        p.special { color: rgb(230, 100, 180) }
    </STYLE>

Here, the author has defined a cascade where the "corporate" style sheet is provided in two forms, one suited to printing and the other for screen use. The "techreport" stylesheet and the rules defined by the STYLE element are for use in both situations. The MEDIA attribute can be used with both LINK and STYLE elements. Some of the permitted values include screen, print, aural and all. The complete list is defined later on in this specification.

Here is an example of using the MEDIA attribute with the STYLE element for adding sound effects to anchors for use in speech output:

    <STYLE TYPE="text/css" MEDIA="aural">
      A {cue-before: url(bell.aiff); cue-after: url(dong.wav)}
    </STYLE>

Persistent, Default and Alternate Styles

A persistent style is one that is always applied regardless of user selection. A default style is one that applies when the page is loaded, but which the user can disable in favor of an alternate style sheet.

LINK and STYLE elements without a TITLE attribute define persistent styles and are always applied, e.g.

    <!-- a persistent style -->
    <link href=xxx.css rel=stylesheet>

Adding a TITLE attribute converts the element to defining a default style, e.g.

    <!-- a default style titled "Compact" -->
    <link href=xxx.css title="Compact" rel=stylesheet>

Going yet further and adding the "alternate" keyword to the REL attribute (i.e. rel="alternate stylesheet") converts the element to defining an alternate style, e.g.

    <!-- an alternate style titled "Medium" -->
    <link href=xxx.css title="Medium" rel="alternate stylesheet">

    <!-- an alternate style titled "Large" -->
    <link href=xxx.css title="Large" rel="alternate stylesheet">

To define several alternate styles, you use the TITLE attribute to group LINK and STYLE elements belonging to the same style. All members of the same style must have exactly the same value for TITLE, but elements without the TITLE attribute are always applied (unless they are inappropriate to the current media).

<LINK REL="alternate stylesheet" TITLE="compact" HREF="small-base.css">
<LINK REL="alternate stylesheet" TITLE="compact" HREF="small-extras.css">
<LINK REL="alternate stylesheet" TITLE="big print" HREF="bigprint.css">
<LINK REL=stylesheet HREF="common.css">

Here, the author has provided two styles, one compact and one for increased legibility. The common style properties, which always apply, have been placed in a shared file "common.css". In addition, the compact style uses two files (small-base.css and small-extras.css), while the big-print style use just one (bigprint.css).

User agents should provide a means for users to view and pick from the list of alternative styles, and it is suggested that the value of the TITLE attribute be used to name each choice.

Sometimes its convenient to configure your Web server to specify the style sheet to be applied to a group of pages on your site. The HTTP Link header is taken to be the same as if a LINK element with the same attributes and values had occurred in the document's HEAD. Multiple Link headers correspond to multiple LINK elements occurring in the same order as the headers, e.g.

    Link: REL=stylesheet HREF="corporate.css"

corresponds to:

    <LINK REL=stylesheet HREF="corporate.css">

LINK and META elements implied by HTTP headers are defined as occurring before any explicit LINK and META elements in the document's HEAD.

You can specify several alternative styles, using multiple Link headers, and then use the REL attribute to determine the default style, e.g. in the following "compact" is applied by default since it omits the "alternate" keyword for the REL attribute:

Link: REL="stylesheet" TITLE="compact" HREF="compact.css"
Link: REL="alternate stylesheet" TITLE="big print" HREF="bigprint.css"

This should also work when HTML documents are being by transported via email. Some email agents can alter the ordering of RFC 822 headers. To protect against this altering the cascading order for style sheets specified by Link headers, you can use header concatenation to merge several instances of the same header field. The quote marks are only needed when the attribute values include whitespace. Use SGML entities for character codes which are otherwise not permitted within HTTP or Email headers, or which are likely to effected by transit through gateways.

The LINK element

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

    <!ENTITY % MEDIA
                "(print|screen|projection|braille|aural|all)">

    <!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 --
        media   %MEDIA    ALL        -- intended rendering medium --
        >
HREF
This should give the URL for the linked style sheet.
TITLE
This is used to group LINK (and STYLE) elements that together define a named style. All members of the same style must have exactly the same value for TITLE, but elements without the TITLE attribute are always applied (unless they are inappropriate to the current media).
REL
For the LINK element to be recognized as being to a style sheet, this attribute must include the relationship value "stylesheet" for persistent or default styles, and "alternate stylesheet" for alternate style sheets. HTML allows space separated lists for relationship values. Relationship values are case insensitive. The precise definition of case insensitivity is as defined below for the CLASS attribute.
REV
This attribute is not needed when the LINK element represents a link to a separate style sheet. It defines a reverse relationship, that is, the relationship from the resource specified by the HREF attribute to the resource that includes this LINK element.
TYPE
The TYPE attribute can be used to specify the Internet Media type and associated parameters for the linked style sheet. This allows the user agent to disregard style sheets in unsupported notations, without the need to first make a remote query across the network.
MEDIA
This is used to indicate that a style sheet pointed to by a LINK element is designed for a particular medium. For example:
<LINK REL=stylesheet MEDIA=print
        HREF="printstylesheet.css" TYPE="text/css">

The MEDIA attribute is case insensitive. It takes one of the following values:

PRINT
output for paged opaque material, and for documents viewed on screen in print preview mode
SCREEN
a continuous presentation for computer screens
PROJECTION
paged presentation for projected presentations
BRAILLE
for braille tactile feedback devices
AURAL
aural presentation, e.g. for a speech synthesizer
ALL
the default value, the style sheet applies to all output devices

The MEDIA attribute can also take a comma-separated list of these values, e.g.

<LINK REL=stylesheet MEDIA="print, screen"
        HREF="printstylesheet.css" TYPE="text/css">

In the future, there may be more values, and each value may associated with parameters. To enable such extensions to be introduced smoothly, user agents conforming to this specification must be able to parse the media type attribute value as follows:

  1. Comma characters (Unicode decimal 44) are used to break the media attribute value into a list of entries, e.g.
        media="screen, 3d-glasses, print and resolution > 90dpi"
    

    is mapped to:

        "screen"
        "3d-glasses"
        "print and resolution > 90dpi"
    
  2. Each entry is truncated just before the first character which isn't a US ASCII letter [a-zA-Z] (Unicode decimal 65-90, 97-122), or hyphen (45) . In the example this gives:
        "screen"
        "3d-glasses"
        "print"
    
  3. A case insensitive match is then made with the set of media types defined above. Entries which don't match should be ignored. In the example we are left with screen and print.

Note: style sheets may include media dependent variations within them. For instance the proposed CSS @media construct. In such cases it may be appropriate to use the default: media=all.

The STYLE element

This allows authors to include style information as part of the document. One or more STYLE elements may be included in the document HEAD. It allows authors to provide style information as part of the document. The STYLE element requires a start and an end tag, e.g.

    <HEAD>
    <TITLE>Title</TITLE>
    <STYLE TYPE="text/css">
      H1 { color: black }
      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 --
        media   %MEDIA    ALL        -- intended rendering medium --
        >

The attributes are defined as follows:

TYPE
The TYPE attribute can be used to specify the Internet Media type and associated parameters for the linked style sheet. This allows the user agent to disregard style sheets in unsupported notations.
TITLE
This is used to group LINK and STYLE elements that together define a named style. All members of the same style must have exactly the same value for TITLE, but elements without the TITLE attribute are always applied (unless they are inappropriate to the current media).
MEDIA
This is used to indicate that a style information contained within this element has been designed for the designated media. The permitted values and their interpretation is the same as for the LINK element.

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.

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.

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

CLASS values are case insensitive: Characters with multiple possible representations in ISO 10646 (e.g. both precomposed and base+diacritic forms) match only if they have the same representation, except for case differences, in both strings. Case folding must be performed as specified in the Unicode Standard, Version 2.0, section 4.1; in particular it is recommended that case-insensitive matching be peformed by folding to uppercase letters to lowercase, not vice versa. This is the same definition as used by XML.

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-variant: small-caps">This text
should be in small capitals and colored red!

The SPAN element

    <!ELEMENT span - - (%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-variant: 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.

HTML 3.2
The W3C Recommendation for HTML 3.2 (January `97) can be downloaded from http://www.w3.org/pub/WWW/TR/REC-html32.html
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.
RFC 2068
"HTTP Version 1.1 ", by Roy T. Fielding, Jim Gettys, and Jeff Mogul, Henrik Frystyk Nielsen, and Tim Berners-Lee. January 1997. This document can be downloaded from ftp://ds.internic. net/rfc/rfc2068.txt.
CSS
"Cascading style sheets" by Håkon Lie & Bert Bos, December 1996. The W3C Recommendation for CSS1 can be downloaded from http://www.w3.org/pub/WWW/TR/REC-css1-961217.html
ISO/IEC 10646
"Information Technology - Universal Multiple- Octet Coded Character Set (UCS) - Part 1: Architecture and Basic Multilingual Plane". ISO (Internatational Organization for Standardization). ISO/IEC 10646-1993 (E). 1993.
Unicode
"The Unicode Standard: Version 2.0", The Unicode Consortium (http://www.unicode.com). Addison Wesley Developers Press, 1996.