Copyright ©2000 W3C® (MIT, INRIA, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.
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.
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.
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:
<p style="color: #090; line-height: 1.2">...</p>
<p style="{color: #090; line-height: 1.2} :first-letter {color: #900}">...</p>
<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).
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.
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.