<style>

  • Revision slug: Web/HTML/Element/style
  • Revision title: <style>
  • Revision id: 460459
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

Summary

The HTML <style> element contains style information for a document, or a part of document. The specific style information is contained inside of this element, usually in the CSS.

  • Content categoriesMetadata content, and if the scoped attribute is present: flow content .
  • Permitted content Style information matching the language of the type attribute.
  • Tag omission {{no_tag_omission}}
  • Permitted parent elements ...
  • DOM interface {{domxref("HTMLStyleElement")}}

Attributes

This element includes the global attributes.

{{htmlattrdef("type")}}
This attribute defines the styling language as a MIME type (charset should not be specified). 'text/css' is assumed if this attribute is absent.
{{htmlattrdef("media")}}
Which media should this style apply to. Should be a media query, see http://dev.w3.org/csswg/css3-mediaqueries.
{{htmlattrdef("scoped")}}
If this attribute is present, then the style applies only to its parent element. If absent, the style applies to the whole document.
{{htmlattrdef("title")}}
Specifies alternative style sheet sets.
{{htmlattrdef("disabled")}}
If set, disables (does not apply) the style rules to the {{domxref("document","Document")}} that are specified within the element.

Examples

A simple stylesheet

<style type="text/css">
body {
  color:red;
}
</style> 

A scoped stylesheet

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

Live sample

{{ EmbedLiveSample('A_scoped_stylesheet', '100%', '200') }}

Specifications

Specification Status Comment
{{ SpecName('HTML WHATWG', 'document-metadata.html#the-style-element', 'style') }} {{ Spec2('HTML WHATWG') }} No change from {{ SpecName('HTML5 W3C') }}.
{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }} {{ Spec2('HTML5 W3C') }} Added the scoped attribute
{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }} {{ Spec2('HTML4.01') }}  

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{CompatVersionUnknown}} {{CompatGeckoDesktop(1.0)}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
scoped {{CompatUnknown}} {{CompatGeckoDesktop(21.0)}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}} {{CompatGeckoDesktop(1.0)}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
scoped {{CompatUnknown}} {{CompatGeckoMobile(21.0)}} {{CompatNo}} {{CompatNo}} {{CompatNo}}

See also

  • The {{HTMLElement("link")}} element allowing to use external style sheets.

Revision Source

<h2 id="Summary">Summary</h2>
<p>The <strong>HTML <code>&lt;style&gt;</code></strong><strong> element</strong> contains style information for a document, or a part of document. The specific style information is contained inside of this element, usually in the <a href="/en-US/docs/Web/CSS">CSS</a>.</p>
<ul class="htmlelt">
  <li><dfn><a href="/en-US/docs/HTML/Content_categories">Content categories</a></dfn><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>.</li>
  <li><dfn>Permitted content</dfn> Style information matching the language of the <code>type</code> attribute.</li>
  <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
  <li><dfn>Permitted parent elements</dfn> ...</li>
  <li><dfn>DOM interface</dfn> {{domxref("HTMLStyleElement")}}</li>
</ul>
<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). 'text/css' is assumed if this attribute is absent.</dd>
  <dt>
    {{htmlattrdef("media")}}</dt>
  <dd>
    Which media should this style apply to. Should be a media query, see <a href="http://dev.w3.org/csswg/css3-mediaqueries">http://dev.w3.org/csswg/css3-mediaqueries</a>.</dd>
  <dt>
    {{htmlattrdef("scoped")}}</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>
  <dt>
    {{htmlattrdef("disabled")}}</dt>
  <dd>
    If set, disables (does not apply) the style rules to the {{domxref("document","Document")}} that are specified within the element.</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>
<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>No change from {{ SpecName('HTML5 W3C') }}.</td>
    </tr>
    <tr>
      <td>{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }}</td>
      <td>{{ Spec2('HTML5 W3C') }}</td>
      <td>Added the <code>scoped</code> attribute</td>
    </tr>
    <tr>
      <td>{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }}</td>
      <td>{{ Spec2('HTML4.01') }}</td>
      <td> </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>{{CompatUnknown}}</td>
        <td>{{CompatGeckoDesktop(21.0)}}</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(21.0)}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>The {{HTMLElement("link")}} element allowing to use external style sheets.</li>
</ul>
Revert to this revision