Warning:
This wiki has been archived and is now read-only.

Elements/style

From HTML Wiki
Jump to: navigation, search

<style>

The <style> element allows authors to embed style information in their documents.


HTML Attributes

  • media = media-query list
    Specifies which media the styles apply to.
    The default, if the media attribute is omitted, is "all", meaning that by default styles apply to all media.


  • type = A valid MIME type that designates a styling language.
    Gives the styling language.
    The default value for the type attribute, which is used if the attribute is absent, is "text/css".


  • scoped = boolean
    Indicates that the specified style information is meant to apply only to the style element’s parent element, and that element’s child nodes. Otherwise, the specified styles are meant to apply to the entire document. [Example B]


  • Also, the title attribute has special semantics on this element.
    The title attribute on style elements defines alternative style sheet sets. If the style element has no title attribute, then it has no title; the title attribute of ancestors does not apply to the style element.


See also global attributes.


Example

Example A

The following document has its emphasis styled as bright red text rather than italics text, while leaving titles of works and Latin words in their default italics. It shows how using appropriate elements enables easier restyling of documents. [try it]: 

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>My favorite book</title>
    <style>
       body { color: black; background: white; }
       em { font-style: normal; color: red; }
    </style>
  </head>
  <body>
    <p>My <em>favorite</em> book of all time has <em>got</em> to be
    <cite>A Cat's Life</cite>. It is a book by P. Rahmel that talks
    about the <i lang="la">Felis Catus</i> in modern human society.</p>
  </body>
</html>

Example B

In the following example, the style element influences only a p element in section element. [try it]: 

<p>text</p>
<section id="example1">
  <style scoped="scoped">
    p {
      color: #ff0000;
    }
  </style>
  <h1>title</h1>
  <p>text</p>
</section>

The following example is use to present markup to user agents that don't support the scoped attribute. [try it]: 

<p>text</p>
<section id="example1">
  <style scoped="scoped">
    #example1 p {
      color: #ff0000;
    }
  </style>
  <h1>title</h1>
  <p>text</p>
</section>


HTML Reference

The HTML5 specification defines the <style> element in 4.2.6 The style element.

Retrieved from "https://www.w3.org/html/wiki/index.php?title=Elements/style&oldid=1003"