Elemento style

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento style contiene a un bloque de declaraciones de estilo. En contraste con el elemento link, que solamente enlaza a la hoja de estilo como un recurso externo, en este caso la información de estilo estará incrustada en el documento mismo, entre los tags de este elemento. El elemento style solo puede ser declarado en el encabezado del documento (head).

El atributo scoped, nuevo en HTML5, ha sido recientemente removido de la especificación debido al escaso soporte provisto por los navegadores.

Ejemplos

El siguiente ejemplo muestra una declaración básica de estilos de alcance global, ubicada en el encabezado del documento (head), el lugar que le pertenece.

<head>
  <title>Sed de sangre: una novela escrita por el Conde Drácula</title>
  <style>
    * {
      color: red;
      background-color: red;
      border-color: red;
    }
  </style>
</head>

Atributos

Atributos específicos

media

Una lista de media queries indicando los tipos de medio (y sus características) para los cuales las declaraciones en este elemento han sido diseñadas. Por ejemplo, un conjunto de declaraciones de estilo podría estar optimizado para impresión (menos colores, imágenes y fondos), un dispositivo móvil o una pantalla normal. El valor por defecto es "all" (todos).

Ejemplo

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

nonce

Un "número de utilización única" (proveniente de la criptografía) que puede ser usado por la Política de seguridad de contenido para determinar si los estilos especificados serán aplicados al documento.

Ejemplo

<style nonce="cCB7DQogIGRpc3BsYXk6IG5vbmU7DQp9">
  p {
    display: none;
  }
</style>

type

El tipo de contenido (o Tipo de medio de Internet) de las declaraciones de estilo. Si este atributo es omitido, el valor por defecto "text/css" será asumido.

Ejemplo

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

scoped

Un valor booleano que indica si las declaraciones de estilo contenidas en este elemento deberían afectar a todos los elementos en el documento o solo a su padre y todos los hijos de éste. Cuando presenta los valores "scoped" o la cadena vacía ("") o si tan solo está presente, este atributo indica que las declaraciones afectarán únicamente al elemento padre y a los hijos de éste.

El atributo scoped, nuevo en HTML5, ha sido recientemente removido de la especificación debido al escaso soporte provisto por los navegadores.

Ejemplo

<section>
  <style scoped>
    p {
      color: red;
      font-weight: bold;
    }
  </style>
  <p>Hay una cosa muy importante a notar aquí...</p>
</section>
<p>Ahora, hablemos de cosas regulares...</p>

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.