<style>

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

Revision Content

Summary

Style element contains style information for a document. Style information should go inside of this element, usually in the CSS language (see CSS).

Usage context

Content categories Metadata content, If the scoped attribute is present: flow content
Permitted content Depends on value of type attribute.
Tag omission None, must have both a start tag and an end tag.
Normative document HTML5, section 4.2.6; HTML 4.01, section 14.2.3

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 style applies only to its parent element. If absent, style applies to the whole document. See WhatWG spec.
{{htmlattrdef("title")}}
Specifies alternative style sheet sets.
{{htmlattrdef("disabled")}}
If set, disables (does not apply) the style rules to the Document that are specified within the element.

DOM interface

This element implements the HTMLStyleElement interface.

Examples

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

Scoped stylesheet

<article>
  <h1>Scoped stylesheet</h1>
  <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('Scoped_stylesheet', '100%', '200') }}

Revision Source

<h2 id="Summary">Summary</h2>
<p>Style element contains style information for a document. Style information should go inside of this element, usually in the CSS language (see <a href="/en-US/docs/CSS" title="CSS">CSS</a>).</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td>Content categories</td>
      <td><a href="/en-US/docs/HTML/Content_categories#Metadata_content" title="HTML/Content_categories#Metadata_content">Metadata content</a>, If the <code>scoped</code> attribute is present: <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">flow content </a></td>
    </tr>
    <tr>
      <td>Permitted content</td>
      <td>Depends on value of <code>type</code> attribute.</td>
    </tr>
    <tr>
      <td>Tag omission</td>
      <td>None, must have both a start tag and an end tag.</td>
    </tr>
    <tr>
      <td>Normative document</td>
      <td><a href="http://www.w3.org/TR/html5/semantics.html#the-style-element" title="http://www.w3.org/TR/html5/semantics.html#the-style-element">HTML5, section 4.2.6</a>; <a href="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE" title="http://www.w3.org/TR/html401/present/styles.html#edef-STYLE">HTML 4.01, section 14.2.3</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Attributes">Attributes</h2>
<p>This element includes the <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="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 style applies only to its parent element. If absent, style applies to the whole document. See <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-style-scoped" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-style-scoped">WhatWG spec</a>.</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 <a href="/en-US/docs/DOM/document" title="document">Document</a> that are specified within the element.</dd>
</dl>
<h2 id="DOM_interface">DOM interface</h2>
<p>This element implements the <code><a href="/en-US/docs/DOM/HTMLStyleElement " rel="internal">HTMLStyleElement </a></code> interface.</p>
<h2 id="Examples">Examples</h2>
<pre class="brush:html">
&lt;style type="text/css"&gt;
body {
  color:red;
}
&lt;/style&gt; 
</pre>
<h3 id="Scoped_stylesheet">Scoped stylesheet</h3>
<pre class="brush:html; highlight:7">
&lt;article&gt;
  &lt;h1&gt;Scoped stylesheet&lt;/h1&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>
<p>{{ EmbedLiveSample('Scoped_stylesheet', '100%', '200') }}</p>
Revert to this revision