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.
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.
There are several approaches for associating HTML documents with separate style sheets:
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.
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. This will be described in a separate working draft.
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 also 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 type -- rev CDATA #IMPLIED -- reverse link type -- type CDATA #IMPLIED -- advisory Internet media type -- >
A single STYLE element may be included in the document head. It allows authors to include style rules within the HTML document, 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 - O (#PCDATA)> <!ATTLIST style type CDATA #REQUIRED -- Internet media type for style -- title CDATA #IMPLIED -- advisory title for this style -- >
The attributes are defined as follows:
The content model for the STYLE element precludes SGML tags, and the end tag of a STYLE element can usually be omitted, e.g. when the STYLE element is followed by another element. Some characters may require escaping with their SGML entity names: "&" followed by a letter or "#" character should be represented by "&" while "<" followed by a letter, "!" or "?" character should be represented by "<".
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.
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 % attrs "id ID #IMPLIED -- element identifier -- class NAMES #IMPLIED -- for subclassing elements -- style CDATA #IMPLIED -- rendering annotation -- lang NAME #IMPLIED -- as per RFC 1766 -- dir (ltr|rtl) #IMPLIED -- I18N text direction --">
For example:
<TITLE>Test Document</TITLE> <STYLE TYPE="text/css"> <P STYLE="color: red; font-style: small-caps">This text should be in small capitals and colored red!
The end tag for the STYLE element has been omitted here since the element is unambiguously ended by the <P> start tag.
en, en-US, en-uk, i-cherokee, x-pig-latin.
The DIR attribute specifies an encapsulation boundary which governs the interpretation of neutral and weakly directional characters. It does not override the directionality of strongly directional characters. The DIR attribute value is one of LTR for left to right, or RTL for right to left, e.g. DIR=RTL.
<!ELEMENT span O O (%text)*> <!ATTLIST span %attrs; -- id, class, style, lang and dir -- >
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 is in small-caps.
This would be formatted to look something like:
THE FIRST few words of this article is 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.
<!ELEMENT div - - (%body.content)*> <!ATTLIST div %attrs; -- id, class, style, lang and dir -- align (left|center|right|justify) #IMPLIED >
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 the white-hot hope 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.
DIV can be used with an ALIGN attribute to specify the default horizontal alignment for the contents of the DIV element. This is needed for compatibility with deployed browsers and may be overriden by 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.
When a user agent applies a style sheet to a document while the author of that document has indicated a preference for a different style sheet, the user agent may have to alert the user to that fact. Exactly how and when that is done is outside the scope of this report. E.g., the CSS style sheet language gives rules for the conditions under which a user is allowed to override the author's choices.
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.
This specification limits the number of STYLE elements to one per document. If later revisions allow multiple STYLE elements in the document head (e.g. to cater for alternative styles) one will need a different way of specifying the style notation for STYLE attributes on the elements in the document body. The suggested choice is an attribute on the BODY element, e.g. "styletype", with the same definition as the "type" attribute for the STYLE element.
Also, there is no way to specify that two or more style sheet are to be merged. A common case is where the style of a document is based on an organization-wide style sheet (which is likely to be cached), but needs document-specific overrides. This functionality may be added in the future, but can also be provided by the style sheet notation itself, e.g. in CSS one can specify:
<HEAD> <TITLE>Title</TITLE> <STYLE TYPE="text/css"> @import "house-style.css" @import "draft-report.css" H1 { color: red } /* override cascaded style sheets */ </STYLE> </HEAD>