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.

Table of contents

Description

The style element contains a block with CSS 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. The style element can only be declared in the head.

The type attribute, has been removed from the specification due to the lack of support implementation for other style sheet formats.

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.