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

W3C Working Draft 15 May 2002

This version:
Latest version:
Previous version:
Tantek Çelik (Microsoft), <tantekc@microsoft.com>
Bert Bos (W3C), <bert@w3.org>
Marc Attinasi (AOL/Netscape), <attinasi@netscape.com>


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 (see summary). 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.

2. Examples

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>
  4. Importing a style sheet to apply as a scoped style sheet:
    <div class="navigation">
              style="@import url(navigationstyles.css);">...</div>

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 Selectors recommends using double colons for pseudo-elements.

This document defines both the simple case (only properties on the element itself, example 1), as well as more complex cases such as rules that apply only to the element (e.g. properties on the element's pseudo-elements and pseudo-classes, examples 2 and 3), and scoped style sheets (the use of @import which apples the referenced style sheet to the subdocument consisting of the element and its children with the element as the root, example 4).

3. Grammar

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

  : S* [ declarations | declarations-block | inline-ruleset* | stylesheet ]

  : declaration [ ';' S* declaration ]*
  : '{' S* declarations '}' S*
  : [ pseudo* S* [ ',' S* pseudo* S* ]* ]?

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.

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


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


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

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

5.1. Basic 'style' attribute profile

Basic profile
  • declarations
  • declarations-block
  • 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.

5.2. Pseudo-rules 'style' attribute profile

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


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

5.3. Complete style sheet 'style' attribute profile

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


Extra constraints


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

6. Acknowledgments

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

7. References

7.1. Normative References

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

7.2. Informative References

Patrick Ion; Robert Miner. Mathematical Markup Language (MathML) 1.01 7 July 1999. W3C Recommendation. URL: http://www.w3.org/TR/REC-MathML
Jon Ferraiolo ed. Scalable Vector Graphics (SVG) 1.0 Specification. 5 September 2001. W3C Recommendation. URL: http://www.w3.org/TR/SVG
Modularization of XHTML. 10 April 2001. W3C Recommendation. URL: http://www.w3.org/TR/xhtml-modularization