Expand your HTML skills through an MDN Fellowship - Apply by April 1 http://mzl.la/MDNFellowship

mozilla
Your Search Results

    <style>

    Summary

    The HTML Style Element (<style>) contains style information for a document, or part of a document. By default, the style instructions writen inside that element are expected to be CSS.

    Attributes

    This element includes the global attributes.

    type
    This attribute defines the styling language as a MIME type (charset should not be specified). This attribute is optional and default to text/css if it's missing.
    media
    Which media should this style apply to. It's value is a media query, which default to all if the attribute is missing.
    scoped
    If this attribute is present, then the style applies only to its parent element. If absent, the style applies to the whole document.
    title
    Specifies alternative style sheet sets.
    disabled
    If set, disables (does not apply) the style rules, specified within the element, to the Document.

    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

    Specifications

    Specification Status Comment
    WHATWG HTML Living Standard
    The definition of 'style' in that specification.
    Living Standard No change from HTML5.
    HTML5
    The definition of 'style' in that specification.
    Recommendation Added the scoped attribute
    HTML 4.01 Specification
    The definition of 'style' in that specification.
    Recommendation  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
    scoped 20 [1] 21.0 (21.0)[2] Not supported Not supported Not supported
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
    scoped ? 25.0 (25.0)[2] Not supported Not supported Not supported

    [1] Supported in Chrome 20+ to 34 by enabling the "Enable <style scoped>" or "experimental WebKit features" flag in chrome://flags. Removed in Chrome 35+ due to code complexity.
    [2] Gecko 20 and later implement :scope pseudo-classes, but the preference layout.css.scope-pseudo.enabled must be set to true. This is only the case by default in Nightly and Aurora test versions.

    See also

    • The <link> element allowing to use external style sheets.

    Document Tags and Contributors

    Last updated by: Jeremie,