W3C

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

W3C Working Draft 5 March 2001

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

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.

Not all XML-based document formats have a "style" attribute to permit the user to use CSS to style documents and specific elements in documents, but in case a certain format has a "style" attribute and the attribute accepts CSS as its value, then this specification describes the attribute's syntax and interpretation.

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 href="http://www.w3.org/"
              style="{color: #900}
              :link {background: #ff0}
              :visited {background: #fff}
              :hover {outline: thin red solid}
              :active {background: #00f}">...</a>

(Note: in CSS1 and CSS2, the spelling of '::first-letter' and '::first-line' is ':first-letter' and ':first-line' respectively, i.e., with a single colon, but we expect that CSS3 will recommend double colons for pseudo-elements.)

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 | declarations-block | inline-ruleset* | stylesheet ]
  ;

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

Please refer to the grammar in appendix D of the CSS2 specification [CSS2] 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 how style sheets and "style" attributes are cascaded together for the case where the inline fragment consists of declarations only.

In addition to simple declarations, the style attribute is now permitted to take rulesets. These rules have the additive specificity of their selectors in addition to the specificity of the style attribute. The examples indicate what is added to each of the specificity components using the familiar '+=' notation.

Example:

<p style="{color: green; width: 10em}                   /* a+=0 b+=0 c+=0 */
          ::first-letter {float: left; font-size: 300%}   /* a+=0 b+=0 c+=1 */
         ">
  This is an example of a paragraph with inline style attribute rules
  to create a spot effect, in this case, a drop-cap first letter.
</p>

Example:

<a href="http://www.w3.org/Style/CSS"
   style="{color: blue; background: white}  /* a+=0 b+=0 c+=0 */
          :visited {color: green}           /* a+=0 b+=1 c+=0 */
          :hover {background: yellow}       /* a+=0 b+=1 c+=0 */
          :visited:hover {color: purple}    /* a+=0 b+=2 c+=0 */
         ">
  Example of a hyperlink to the CSS home page with special one-off
  visited and hover effects.
</a>

4. Profiles

Several profiles are provided for implementation conformance. The profiles are of increasing power and complexity. Each profile is a superset of, and backwards compatible with, all profiles that preceed it. This permits implementations to first implement simpler profiles, and later implement more powerful ones. An implementation must implement at least one profile in order to be conformant.

Each profile defines a subset of CSS syntax that a 'style' attribute allows and excludes by listing both the grammar productions for inline-stylesheet which are accepted, and those which are excluded. Productions which are excluded by a profile are to be treated as unrecognized, and ignored, according to the rules for forward-compatible parsing. See chapter 4 of the CSS2 specification.

4.1. Basic 'style' attribute profile

Basic profile
Accepts
  • declarations
  • declarations-block
Excludes
  • inline-ruleset
  • stylesheet
Extra constraints

Implementations are required to support the declarations-block syntax. This was ambiguous/unclear in CSS1 and CSS2, and is made explicit by this document.

Comments This profile corresponds to CSS level 1 & 2.

4.2. Pseudo-rules 'style' attribute profile

Pseudo-rules profile
Accepts
  • declarations
  • declarations-block
  • inline-ruleset
Excludes
  • stylesheet
Extra constraints

None.

Comments This profile is new and defined by CSS level 3.

4.3. Complete style sheet 'style' attribute profile

Complete style sheet profile
Accepts
  • declarations
  • declarations-block
  • inline-ruleset
  • stylesheet
Excludes

N/A.

Extra constraints

None.

Comments This profile is new and defined by CSS level 3.

5. Acknowledgments

Thanks to feedback from Daniel Glazman, Ian Hickson, Eric A. Meyer, Björn Höhrmann.

6. References

6.1. Normative 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

6.2. Informative References

[MathML]
Patrick Ion; Robert Miner. Mathematical Markup Language (MathML) 1.01 1999. W3C Recommendation. URL: http://www.w3.org/TR/REC-MathML
[SVG10]
Jon Ferraiolo ed. Scalable Vector Graphics (SVG) 1.0 Specification. 2000. W3C Candidate Recommendation. URL: http://www.w3.org/TR/SVG
[XHTMLMOD]
Modularization of XHTML. 2000. W3C Candidate Recommendation. URL: http://www.w3.org/TR/xhtml-modularization