style element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The style element contains a block with style declarations. In contrast with the link element, that only links the style sheet as an external resource, in this case the style information will be embedded in the document itself, between this element's tags.

In HTML5 the placement of the style element depends on the presence of the scoped attribute. If present, the style element can be inserted as the first child of any element that doesn't have a transparent content model. Otherwise, if the scoped attribute is absent, the style element can only be declared in the head.

The scoped attribute, new in HTML5, has poor browser support (as of 2014-08-07). Authors are adviced to avoid relying on this feature until the number of supporting browsers increases.

Examples

The following example shows a basic document-wide style declaration, placed in the head of the document (where it should be).

<head>
  <title>Blood thirst: a novel by Count Dracula</title>
  <style>
    * {
      color: red;
      background-color: red;
      border-color: red;
    }
  </style>
</head>

Now a scoped style declaration (with the scoped attribute present) takes place inside a random section element. The styles declared in this block should only affect the sibligns of the element or, in other words, the children of the section element containing it.

A style element with the scoped attribute present must precede all other elements in its container.

<section>
  <style scoped>
    p {
      background-color: red;
      border-color: red;
    }
  </style>
  <p>I'm going to be a bloody paragraph...</p>
</section>
<p>I'm NOT going to be a red paragraph...</p>

I'm going to be a bloody paragraph...

I'm NOT going to be a red paragraph...

Attributes

Specific attributes

media

A media query list indicating the media types (and their characteristics) for which the declarations in this element have been designed. For example, a set of style declaration could be optimized for a printer (less color, images and backgrounds), a mobile device or a regular screen. The defaut value is "all".

Example

<style media="print">
  img {
    display: none;
  }
</style>

type

The content type (or Internet Media Type) of the style sheet. If this attribute is omitted, the default value "text/css" will be assumed.

Example

<style type="text/css">...</style>

scoped

A boolean value indicating if the style declarations contained in this element should affect all elements in the document or just its parent and all children in it. When it has the values "scoped" or the empty string ("") or if it's just present, this attribute indicates that the declarations will affect the parent element and the children of it only.

A style element with the scoped attribute present must precede all other elements in its container.

Example

<section>
  <style scoped>
    p {
      color: red;
      font-weight: bold;
    }
  </style>
  <p>There's one very important thing to note here...</p>
</section>
<p>Now, let's talk about regular things...</p>

There's one very important thing to note here...

Now, let's talk about regular things...

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.