CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang=en> <head> <meta content="text/html; charset=utf-8" http-equiv=Content-Type> <title>CSS Style Attributes</title> <link href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel="license"> <link href="#contents" rel=contents> <link href="default.css" rel=stylesheet type="text/css">  <link href="https://www.w3.org/StyleSheets/TR/W3C-REC.css" rel=stylesheet type="text/css"> <body class=h-entry> <div class=head>  <p><a href="https://www.w3.org/"><img alt=W3C height=48 src="https://www.w3.org/Icons/w3c_home" width=72></a>  <h1 class=p-name>CSS Style Attributes</h1> <h2 class="no-num no-toc" id=longstatus-date>W3C Recommendation <span class=dt-updated><span class=value-title title=20131107>07 November 2013</span></span></h2> <dl> <dt>This version: <dd> <a class=u-url href="https://www.w3.org/TR/2013/REC-css-style-attr-20131107/">http://www.w3.org/TR/2013/REC-css-style-attr-20131107/</a> <dt>Latest version: <dd><a href="https://www.w3.org/TR/css-style-attr">http://www.w3.org/TR/css-style-attr</a> <dt>Editor's draft: <dd><a href="http://dev.w3.org/csswg/css-style-attr/">http://dev.w3.org/csswg/css-style-attr/</a> (<a href="https://dvcs.w3.org/hg/csswg/log/tip/css-style-attr/Overview.src.html">change log</a>) <dt>Previous version: <dd> <a class=u-url href="https://www.w3.org/TR/2013/PR-css-style-attr-20131003/">http://www.w3.org/TR/2013/PR-css-style-attr-20131003/</a> <dt>Feedback: <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-style-attr%5D%20feedback">www-style@w3.org</a> with subject line “<kbd>[css-style-attr] <var>… message topic …</var></kbd>” (<a href="http://lists.w3.org/Archives/Public/www-style/" rel=discussion>archives</a>) <dt>Editors: <dd class="p-author h-card vcard"> <a class="p-name fn u-url url" href="http://tantek.com/" lang=tr rel=author>Tantek Çelik</a> (<a class="p-org org h-org" href="https://mozilla.org/">Mozilla</a>, and formerly at <a href="http://microsoft.com/">Microsoft Corporation</a>) <<a class="u-email email" href="mailto:tantek@cs.stanford.edu">tantek@cs.stanford.edu</a>> <dd class="p-author h-card vcard"> <a class="p-name fn n u-url url" href="http://fantasai.inkedblade.net/contact" rel=author><span class="p-given-name given-name">Elika</span> <abbr class="p-additional-name additional-name">J.</abbr> <span class="p-family-name family-name">Etemad</span></a> (<a class="p-org org h-org" href="https://mozilla.org/">Mozilla</a>) <dt>Previous Editors: <dd class=vcard><a class="fn url" href="https://www.w3.org/People/Bos/">Bert Bos</a> (<a class=org href="https://www.w3.org/">W3C</a>), <<a class=email href="mailto:bert@w3.org">bert@w3.org</a>> <dd class=vcard><span class=fn>Marc Attinasi</span> (<span class=org>AOL/Netscape</span>), <<a class=email href="mailto:attinasi@netscape.com">attinasi@netscape.com</a>> <dt>Test suite: <dd> <a href="http://test.csswg.org/suites/css-style-attr/nightly-unstable/">http://test.csswg.org/suites/css-style-attr/nightly-unstable/</a> </dl> <p>Please refer to the <a href="https://www.w3.org/Style/2013/REC-css-style-attr-20131107-errata.html"><strong>errata</strong></a> for this document, which may include some normative corrections.</p> <p>See also <a href="https://www.w3.org/2003/03/Translations/byTechnology?technology=css-style-attr"> <strong>translations</strong></a>.</p>  <p class=copyright><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel=license>Copyright</a> © 2013 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p>  <hr title="Separator for header"> </div> <h2 class="no-num no-toc" id=abstract>Abstract</h2> <p><span class=p-summary> Markup languages such as HTML <a href="#HTML401" rel=biblioentry>[HTML401]</a> and SVG <a href="#SVG11" rel=biblioentry>[SVG11]</a> provide a style attribute on most elements, to hold inline style information that applies to those elements. This draft describes the syntax and interpretation of the CSS fragment that can be used in such style attributes. </span> <h2 class="no-num no-toc" id=status>Status of this document</h2>  <p>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the <a href="https://www.w3.org/TR/">W3C technical reports index</a> at http://www.w3.org/TR/. </p> <p> This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. It is a stable document and may be used as reference material or cited from another document. W3C's role in making the Recommendation is to draw attention to the specification and to promote its widespread deployment. This enhances the functionality and interoperability of the Web. </p> <p>Please see the Working Group's <a href="http://test.csswg.org/suites/css-style-attr/nightly-unstable/report/results.html"> implementation report</a>. One test is not passed, although this is due to bugs in browser implementation of xml:base and attribute (non)ordering, not the style attribute itself. The equivalent test for HTML (including the xml serialisation of HTML5) is passed by multiple implementations.</p> <p> No changes to this document have been made since the previous version. </p> <p>The (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bcss-style-attr%5D%20PUT%20SUBJECT%20HERE"> www-style@w3.org</a> (see <a href="https://www.w3.org/Mail/Request">instructions</a>) is preferred for discussion of this specification. When sending e-mail, please put the text “css-style-attr” in the subject, preferably like this: “[css-style-attr] <em>…summary of comment…</em>” <p>This document was produced by the <a href="https://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of the <a href="https://www.w3.org/Style/">Style Activity</a>). <p>This document was produced by a group operating under the <a href="https://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>. W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel=disclosure>public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>.</p>  <h2 class="no-num no-toc" id=contents>Table of Contents</h2>  <ul class=toc> <li><a href="#intro"><span class=secno>1. </span>Introduction</a> <li><a href="#conformance"><span class=secno>2. </span>Conformance</a> <li><a href="#syntax"><span class=secno>3. </span>Syntax and Parsing</a> <li><a href="#interpret"><span class=secno>4. </span>Cascading and Interpretation</a> <li><a href="#ack"><span class=secno>5. </span>Acknowledgments</a> <li><a href="#references"><span class=secno>6. </span>References </a> <ul class=toc> <li class=no-num><a href="#normative-references">Normative references</a> <li class=no-num><a href="#informative-references">Informative references</a> </ul> </ul>  <h2 id=intro><span class=secno>1. </span>Introduction</h2> <p>Some document formats have a <dfn id=style-attribute>style attribute</dfn> to permit the author to directly apply style information to specific elements in documents. If a document format defines a style attribute (whether named ‘<code class=property>style</code>’ or something else) and the attribute accepts CSS as its value, then this specification defines that <span id=style-attribute0>style attribute</span>’s syntax and interpretation. <div class=example> <p>The following example shows the use of the <code>style</code> attribute in HTML <a href="#HTML401" rel=biblioentry>[HTML401]</a>: <pre><p style="<em>color: #090; line-height: 1.2</em>">...</p></pre> </div> <h2 id=conformance><span class=secno>2. </span>Conformance</h2> <p>A document or implementation cannot conform to CSS Style Attributes alone, but can claim conformance to CSS Style Attributes if it satisfies the conformance requirements in this specification when implementing CSS together with style attribute handling as defined in a document language that has one or more CSS style attributes. <p>Conformance to CSS Style Attributes is defined for two classes: <dl> <dt><dfn id=document>document</dfn> <dd>A document represented in a document language that defines a style attribute for one or more of its elements. <dt><dfn id=interpreter>interpreter</dfn> <dd>Someone or something that interprets the semantics of a document and its associated style information. (Most CSS <a href="https://www.w3.org/TR/CSS21/conform.html#user-agent">user agents</a> fall under this category.) </dl> <p>The conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification. All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. <a href="#RFC2119" rel=biblioentry>[RFC2119]</a> <p>Examples in this specification are introduced with the words "for example" or are set apart from the normative text with <code>class="example"</code>, like this: <div class=example> <p>This is an example of an informative example. </div> <p>Informative notes begin with the word "Note" and are set apart from the normative text with <code>class="note"</code>, like this: <p class=note>Note, this is an informative note. <h2 id=syntax><span class=secno>3. </span>Syntax and Parsing</h2> <p>The value of the style attribute must match the syntax of the contents of a CSS <a href="https://www.w3.org/TR/CSS21/syndata.html#rule-sets">declaration block</a> (excluding the delimiting braces), whose formal grammar is given below in the terms and conventions of the <a href="https://www.w3.org/TR/CSS21/syndata.html#syntax">CSS core grammar</a>: <pre> declaration-list : S* declaration? [ ';' S* declaration? ]* ; </pre> <p class=note>Note that following the CSS2.1 convention, comment tokens are not shown in the rule above. <p>The interpreter must parse the style attribute's value using the same forward-compatible parsing rules that apply to parsing declaration block contents in a normal CSS style sheet. See <a href="https://www.w3.org/TR/CSS21/syndata.html">chapter 4 of the CSS2.1 specification</a> for details. <a href="#CSS21" rel=biblioentry>[CSS21]</a> <p class=note>Note that because there is no open brace delimiting the declaration list in the CSS style attribute syntax, a close brace (<code>}</code>) in the style attribute's value does not terminate the style data: it is merely an invalid token. <h2 id=interpret><span class=secno>4. </span>Cascading and Interpretation</h2> <p>The declarations in a style attribute apply to the element to which the attribute belongs. In the cascade, these declarations are considered to have author origin and a specificity higher than any selector. CSS2.1 <a href="https://www.w3.org/TR/CSS21/cascade.html#specificity">defines</a> how style sheets and style attributes are cascaded together. <a href="#CSS21" rel=biblioentry>[CSS21]</a> Relative URLs in the style data must be resolved relative to the style attribute's element (or to the document if per-element resolution is not defined) when the attribute's value is parsed. <p>Aside from the differences in cascading, the declarations in a style attribute must be interpreted exactly as if they were given in a CSS style rule that applies to the element. <p>The CSS Working Group strongly recommends that document languages do not allow multiple CSS style attributes on a single element. If a document language allows multiple CSS style attributes, each must be parsed independently and treated as a separate style rule, the ordering of which should be defined by the document language, else is undefined. <h2 id=ack><span class=secno>5. </span>Acknowledgments</h2> <p>Thanks to feedback from <span class=vcard><span class=fn>Daniel Glazman</span></span>, <span class=vcard><span class=fn>Ian Hickson</span></span>, <span class=vcard><span class="fn n"><span class=given-name>Eric</span> <abbr class=additional-name>A.</abbr> <span class=family-name>Meyer</span></span></span>, <span class=vcard><span class=fn>Björn Höhrmann</span></span>. <h2 id=references><span class=secno>6. </span>References</h2> <h3 class=no-num id=normative-references>Normative references</h3>   <dl class=bibliography> <dd style="display: none">  <dt id=CSS21>[CSS21] <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 2011. W3C Recommendation. URL: <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> </dd>  <dt id=RFC2119>[RFC2119] <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet RFC 2119. URL: <a href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> </dd>  </dl>  <h3 class=no-num id=informative-references>Informative references</h3>   <dl class=bibliography> <dd style="display: none">  <dt id=HTML401>[HTML401] <dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a href="https://www.w3.org/TR/1999/REC-html401-19991224"><cite>HTML 4.01 Specification.</cite></a> 24 December 1999. W3C Recommendation. URL: <a href="https://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a> </dd>  <dt id=SVG11>[SVG11] <dd>Erik Dahlström; et al. <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011. W3C Recommendation. URL: <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a> </dd>  </dl>  <script src="https://www.w3.org/scripts/TR/fixup.js"></script></html>