<style>

  • Revision slug: HTML/Element/style
  • Revision title: <style>
  • Revision id: 345009
  • Created:
  • Creator: medicdude
  • 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.</p>
  <section>
    <style scoped>
      p { color: red; }
    </style>
    <p>This should be red</p>
  </section>
</article>

{{ languages( { "ja": "ja/docs/HTML/Element/style" } ) }}

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 class="editable" 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="en-US/docs/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="en-US/docs/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 class="external" 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 class="external" 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><span style="line-height: 21px;">This element includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></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 class="external" 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 class="external" 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>
<p>Scoped stylesheet:</p>
<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.&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>
<p>{{ languages( { "ja": "ja/docs/HTML/Element/style" } ) }}</p>
Revert to this revision