Revision 1081528 of <style>

<p id="Summary">{{HTMLRef}}</p>

<p>The <strong>HTML <code>&lt;style&gt;</code> element</strong> contains style information for a document, or part of a document. By default, the style instructions written inside that element are expected to be <a href="/en-US/docs/Web/CSS">CSS</a>.</p>

<table class="properties">
 <tbody>
  <tr>
   <th><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, and if the <code>scoped</code> attribute is present: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td>
  </tr>
  <tr>
   <th>Permitted content</th>
   <td>Text content matching the <code>type</code> attribute, that is <code>text/css</code>.</td>
  </tr>
  <tr>
   <th>Tag omission</th>
   <td>Neither tag is omissible.</td>
  </tr>
  <tr>
   <th>Permitted parent elements</th>
   <td>If the <strong>scoped</strong> attribute is <em>not</em> present: where metadata content is expected or in a {{HTMLElement("noscript")}} element itself a child of {{HTMLElement("head")}} element.<br />
    If the <strong>scoped</strong> attribute is present: where flow content is expected, but before any other <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> other than inter-element whitespace and {{HTMLElement("style")}} elements, and not as the child of an element whose content model is <a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model">transparent</a>.</td>
  </tr>
  <tr>
   <th>DOM interface</th>
   <td>{{domxref("HTMLStyleElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes">Attributes</h2>

<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>

<dl>
 <dt>{{htmlattrdef("type")}}</dt>
 <dd>This attribute defines the styling language as a MIME type (charset should not be specified). This attribute is optional and default to <code>text/css</code> if it's missing.</dd>
 <dt>{{htmlattrdef("media")}}</dt>
 <dd>This attribute&nbsp;defines which media the style should apply to. It's value is a <a href="/en-US/docs/Web/Guide/CSS/Media_queries">media query</a>, which default to <code>all</code> if the attribute is missing.</dd>
 <dt>{{htmlattrdef("scoped")}} {{experimental_inline}} {{deprecated_inline}}</dt>
 <dd>If this attribute is present, then the style applies only to its parent element. If absent, the style applies to the whole document.</dd>
 <dt>{{htmlattrdef("title")}}</dt>
 <dd>Specifies alternative style sheet sets.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<h3 id="A_simple_stylesheet">A simple stylesheet</h3>

<pre class="brush:html">
&lt;style type="text/css"&gt;
body {
  color:red;
}
&lt;/style&gt; 
</pre>

<h3 id="A_scoped_stylesheet">A scoped stylesheet</h3>

<p>In this example, the <code>scoped</code> attribute is used to create a style which applies only to a {{HTMLElement("section")}} element in which it's contained.</p>

<div class="warning">
<p>The <code>scoped</code> attribute has been removed from the specification after only limited and experimental adoption by Chrome and Firefox. You should avoid using it, as it will almost certainly be removed from these browsers soon.</p>
</div>

<pre class="brush:html;highlight:7">
&lt;article&gt;
  &lt;div&gt;The scoped attribute allows for you to include style elements mid-document.
   Inside rules only apply to the parent element.&lt;/div&gt;
  &lt;p&gt;This text should be black. If it is red your browser does not support the scoped attribute.&lt;/p&gt;
  &lt;section&gt;
    &lt;style scoped&gt;
      p { color: red; }
    &lt;/style&gt;
    &lt;p&gt;This should be red.&lt;/p&gt;
  &lt;/section&gt;
&lt;/article&gt;
</pre>

<h4 id="Live_sample">Live sample</h4>

<div>{{ EmbedLiveSample('A_scoped_stylesheet', '100%', '200') }}</div>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{ SpecName('HTML WHATWG', 'document-metadata.html#the-style-element', 'style') }}</td>
   <td>{{ Spec2('HTML WHATWG') }}</td>
   <td>Added the <code>scoped</code> attribute.</td>
  </tr>
  <tr>
   <td>{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }}</td>
   <td>{{ Spec2('HTML5 W3C') }}</td>
   <td>No change from {{ SpecName('HTML4.01') }}.</td>
  </tr>
  <tr>
   <td>{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }}</td>
   <td>{{ Spec2('HTML4.01') }}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>scoped</code></td>
   <td>20<sup>[1]</sup></td>
   <td>{{CompatGeckoDesktop(21.0)}}<sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>scoped</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile(25.0)}}<sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Supported in Chrome 20+ to 34 by enabling the "<strong>Enable &lt;style scoped&gt;</strong>" or "<strong>experimental WebKit features</strong>" flag in <code>chrome://flags</code>. <a href="https://groups.google.com/a/chromium.org/forum/#!searchin/blink-dev/scoped/blink-dev/R1x18ZLS5qQ/Bjuh_cENhlQJ">Removed in Chrome 35+ due to code complexity</a>.</p>

<p>[2] Gecko 20 and later implement {{cssxref(":scope")}} pseudo-class, but the preference <code>layout.css.scope-pseudo.enabled</code> must be set to <code>true</code>. This is only the case by default in Nightly and Aurora test versions.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>The {{HTMLElement("link")}} element allowing to use external style sheets.</li>
</ul>