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, introcuced in HTML5, has been recently removed from the specification due to lack of support by browsers.

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>

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.

The scoped attribute, introcuced in HTML5, has been recently removed from the specification due to lack of support by browsers.

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>

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.