Copyright ©2001 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.
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:
<p style="color: #090; line-height: 1.2">...</p>
<p style="{color: #090; line-height: 1.2} ::first-letter {color: #900}">...</p>
<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).
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.
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>
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.
Basic profile | |
---|---|
Accepts |
|
Excludes |
|
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. |
Pseudo-rules profile | |
---|---|
Accepts |
|
Excludes |
|
Extra constraints |
None. |
Comments | This profile is new and defined by CSS level 3. |
Complete style sheet profile | |
---|---|
Accepts |
|
Excludes |
N/A. |
Extra constraints |
None. |
Comments | This profile is new and defined by CSS level 3. |
Thanks to feedback from Daniel Glazman, Ian Hickson, Eric A. Meyer, Björn Höhrmann.