W3C

Syntax of CSS rules in HTML's "style" attribute

W3C Working Draft 25 October 2000

This version:
http://www.w3.org/TR/2000/WD-css-style-attr-20001025
Latest version:
http://www.w3.org/TR/css-style-attr
Previous version:
-
Editors:
Tantek Çelik (Microsoft), <tantekc@microsoft.com>
Bert Bos (W3C), <bert@w3.org>

Abstract

HTML provides a "style" attribute on most elements, to hold a fragment of a style sheet that applies to those elements. One of the possible style sheet languages is CSS. This draft describes the syntax of the CSS fragment that can be used in the "style" attribute.

Status of this document

This section describes the status of this document at the time of its publication.

This draft has been produced by the CSS working group as part of the style activity. It is a public W3C Working Draft for review by W3C members and other interested parties. As a draft document it 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."

Comments are invited and may be sent to the public mailing list www-style@w3.org (see instructions for subscribing), or to the editors. Discussions should take place on the mailing list.

A list of current public W3C Working Drafts can be found at http://www.w3.org/TR.

Table of contents


1. History

HTML 4.0 introduced the STYLE attribute, whose contents could contain any styling language (through the use of META HTTP-EQUIV Content-Style-Type), but by default, and in practice, has only contained CSS. XHTML Modularization introduced the Style Attribute Module which also has a STYLE attribute whose semantics are the same as that in HTML 4. SVG also has a language neutral Style attribute, whose language is specified with the contentStyleType attribute which has the default value of "text/css". MathML states that all MathML elements accept the Style attribute to facilitate compatibility with CSS.

This document recommends that any future XML based languages which have presentational information (whether visual, aural, tactile or other) also add a STYLE attribute which similarly permits the user to use CSS to style the document and elements in documents written in that language.

Here are a few examples:

  1. Only setting properties on the element itself, no pseudo-elements or pseudo-classes:
    <p style="color: #090; line-height: 1.2">...</p>
  2. Setting properties on the element, as well as on the first letter of the element, by means of the ':first-letter' pseudo-element. Note that curly braces ({...}) are required in this case:
    <p style="{color: #090; line-height: 1.2}
              :first-letter {color: #900}">...</p>
  3. Setting properties on a source anchor for each of its dynamic states, using pseudo-classes:
    <a style="{color: #900}
              :link {background: #ff0}
              :visited {background: #fff}
              :hover {outline: thin red solid}
              :active {background: #00f}">...</a>

This document defines both the simple case (only properties on the element itself, example 1), as well as the more complex case (properties on the element's pseudo-elements and pseudo-classes, examples 2 and 3).

2. Grammar

The syntax of the CSS fragment that is allowed in the HTML "style" attribute can be formally specified as follows:

inline-stylesheet
  : S* [ declarations | inline-ruleset* ]
  ;
declarations
  : declaration [ ';' S* declaration ]*
  ;
inline-ruleset
  : [ pseudo* S* [ ',' S* pseudo* S* ]* ]?
    '{' S* declarations '}' S*
  ; 

Please refer to the grammar in appendix D of the CSS2 specification for the definition of the symbols not defined here.

The same rules for forward-compatible parsing apply to the inline style sheet as to a normal style sheet. See chapter 4 of the CSS2 specification.

3. Cascading order

CSS already defines the meaning of the case where the inline fragment consists of declarations only. Briefly stated: the declarations have the same order in the cascade as if the they were in a rule-set at the end of the author's style sheet with a "specificity" equal to that of a selector consisting of one ID-selector (specificity: a=1, b=0, c=0). For example:

<span style="font-weight: bold">...</span>

This rule is easily generalized to the case where the inline fragment contains inline rule-sets: the declarations are treated the same as if they occured in the same order at the end of the author's style sheet with a specificity equal to that of a selector with one ID-selector and as many pseudo-elements and pseudo-classes as in the inline rule-set. Some examples:

<p style="{font-weight: bold}               /* a=1 b=0 c=0 */
          :active {color: green}            /* a=1 b=1 c=0 */
          :first-letter {color: #369}       /* a=1 b=0 c=1 */
          :first-letter:active {color: red} /* a=1 b=1 c=1 */
         ">...</p>

Please refer to chapter 6 of CSS2 for the rest of the cascading rules.

4. References

[CSS2]
Bert Bos; Håkon Wium Lie; Chris Lilley; Ian Jacobs. Cascading Style Sheets, level 2. 1998. W3C Recommendation. URL: http://www.w3.org/TR/REC-CSS2
[HTML40]
Raggett, D.; Le Hors, A.; Jacobs, I.. HTML 4.0 Specification. 8 July 1997. W3C Recommendation. URL: http://www.w3.org/TR/REC-html40