acerca de HTML

Referencia de etiquetas

Etiqueta style en HTML: cómo escribir CSS interno

La etiqueta <style> contiene reglas CSS que se aplican al documento HTML. Sirve para cambiar la presentación de elementos mediante selectores: por ejemplo, dar un fondo y un color a todos los avisos de una página. Usa este CSS interno para una prueba o para estilos propios de un documento; si varias páginas comparten las reglas, suele resultar más fácil mantener un archivo CSS externo. Referencia de <style> en MDN.

Ejemplo mínimo: dar estilo a un aviso

Guarda este documento como aviso.html, con codificación UTF-8, y ábrelo en el navegador:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Aviso de la biblioteca</title>
    <style>
      .aviso { color: #174a26; background: #e6f4ea; }
    </style>
  </head>
  <body>
    <p class="aviso">Aviso: la biblioteca abre a las 10:00.</p>
    <p>El horario habitual vuelve mañana.</p>
  </body>
</html>

Solo el párrafo con class="aviso" recibe directamente estas reglas: texto verde oscuro sobre fondo verde claro. El segundo conserva su presentación predeterminada. El bloque <style> no se muestra como texto. El selector .aviso identifica la clase; color y background son propiedades CSS.

Cambia color a #000000, guarda y recarga: el aviso pasa a negro. Si retiras <style> completo o quitas la clase del párrafo, desaparece ese formato y ambos textos siguen disponibles. No necesitas JavaScript, archivos adicionales ni servidor.

Sintaxis y contexto válido

¿Dónde va la etiqueta style? En el caso normal, dentro de la cabecera <head>, donde se admite contenido de metadatos. Su ubicación no limita las reglas a la cabecera: los selectores pueden alcanzar elementos del cuerpo.

Escribe apertura <style> y cierre </style>; ninguna de las dos etiquetas se puede omitir. Su contenido es una hoja CSS válida, no párrafos ni otro marcado HTML. Una regla habitual tiene un selector y declaraciones entre llaves: .aviso { color: green; }. No uses scoped: ese atributo antiguo no forma parte del HTML vigente ni proporciona aislamiento. Sintaxis y modelo de contenido en el HTML Living Standard.

CSS interno, externo y en línea

Estas tres alternativas producen el mismo cambio de color en un párrafo de clase aviso, si no hay otras reglas que lo sobrescriban. Pruébalas por separado:

CSS interno: coloca en <head> esta hoja y conserva el párrafo del primer ejemplo:

<style>
  .aviso { color: #174a26; }
</style>

CSS externo: reemplaza ese bloque por un enlace dentro de <head>:

<link rel="stylesheet" href="avisos.css">

Crea avisos.css en la misma carpeta del HTML y escribe:

.aviso { color: #174a26; }

La etiqueta <link> conecta el archivo, que puedes compartir entre documentos. <style> guarda las reglas en cada HTML; repetirlas en muchas páginas obliga a actualizar varias copias.

CSS en línea: retira la hoja anterior y escribe las declaraciones en el propio párrafo:

<p class="aviso" style="color: #174a26;">Aviso: la biblioteca abre a las 10:00.</p>

¿Style y el atributo style son lo mismo? No. El elemento contiene una hoja con selectores; el atributo global style contiene declaraciones para el elemento que lo lleva, sin selector ni llaves. Las propiedades heredables, como el color, también pueden llegar a sus descendientes. El atributo resulta incómodo para cambios repetidos y no permite escribir reglas de impresión como una hoja.

Cómo se aplican las reglas: selectores y cascada

El selector p alcanza todos los párrafos; .aviso alcanza los elementos de esa clase. Si ambos declaran color para el mismo párrafo, la cascada decide cuál se aplica. Prueba este CSS en el primer documento:

.aviso { color: #174a26; }
p { color: #123e64; }

El aviso sigue verde aunque p aparezca después: una clase tiene más especificidad que un selector de tipo. El otro párrafo pasa a azul. Si añades al final otra regla .aviso { color: #000000; }, el aviso pasa a negro por el orden entre reglas empatadas.

El orden resuelve empates después de otros criterios, incluidos origen, importancia y capas. El último bloque no siempre gana, y una hoja interna no tiene prioridad automática sobre una externa. Las declaraciones en línea prevalecen frente a reglas normales del autor; una declaración !important puede superar un color normal en línea. Evita añadirla a ciegas para corregir conflictos. Orden de la cascada CSS.

Caso práctico: aviso con estilos de impresión

Guarda este segundo documento como taller.html en UTF-8 y ábrelo directamente. Todos sus estilos están incluidos:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Taller de encuadernación</title>
    <style>
      body {
        max-width: 40rem;
        margin: 0 auto;
        padding: 1rem;
        font-family: system-ui, sans-serif;
        line-height: 1.6;
        overflow-wrap: anywhere;
        color: #000000;
        background: #ffffff;
      }
      .aviso {
        color: #174a26;
        background: #e6f4ea;
        border: 2px solid #174a26;
        padding: 1rem;
      }
    </style>
    <style media="print">
      .aviso {
        color: #000000;
        background: #ffffff;
        border-color: #000000;
      }
    </style>
  </head>
  <body>
    <h1>Taller de encuadernación</h1>
    <p>Nos reunimos el sábado a las 11:00 en la biblioteca.</p>
    <p class="aviso"><strong>Aviso:</strong> trae un cuaderno usado para practicar.</p>
  </body>
</html>
  1. En pantalla, comprueba el aviso verde con borde y espacio interior.
  2. Abre Imprimir con el menú del navegador o Ctrl+P —Cmd+P en macOS—. En la vista previa, el aviso usa texto y borde negros sobre fondo blanco, por media="print".
  3. Retira solo el bloque de impresión: deja de solicitarse el formato negro al imprimir. La reproducción de fondos depende también de las opciones del navegador.
  4. Quita únicamente media="print": esas reglas se aplican también en pantalla. Retira ambos bloques: siguen el título, el horario y el aviso, con presentación predeterminada.

El texto #174a26 sobre #e6f4ea tiene un contraste calculado de 9,05:1, superior al mínimo de 4,5:1 para texto normal de WCAG 2.2. Negro sobre blanco tiene 21:1. El rótulo «Aviso» transmite la función sin depender del verde. CSS cambia apariencia; el párrafo sigue siendo un párrafo y <strong> conserva su significado de importancia. No necesitas convertir el aviso estático en una alerta ARIA. Ambos ejemplos funcionan sin JavaScript.

Atributos de style

  • media: indica cuándo se aplica la hoja mediante una consulta de medios, como print o (min-width: 40rem). Si se omite, se aplica a todos los medios. La condición no evita otros conflictos de cascada.
  • type: type="text/css" es innecesario en HTML actual; omítelo. No cambia el contenido a otro lenguaje.
  • nonce: es un atributo global útil cuando el sitio sirve una política real de seguridad de contenido, CSP. El servidor genera un valor impredecible y nuevo para cada respuesta; el atributo del bloque debe coincidir con el permitido por la directiva efectiva: style-src-elem, con respaldo en style-src o default-src si las anteriores faltan. Añadir un nonce fijo sin esa política no ofrece protección ni autoriza atributos style. CSP: estilos y requisitos del nonce.

id y class también son globales: poner id="tema" en <style> identifica el bloque, sin restringir a qué elementos alcanza. color es una propiedad CSS; HTMLStyleElement.disabled es una propiedad DOM que JavaScript puede usar para desactivar la hoja, no un atributo HTML disabled de <style>. Atributos y API del elemento.

Errores frecuentes y etiquetas relacionadas

¿Por qué no funciona mi CSS interno? Comprueba en este orden:

  1. Que el bloque esté cerrado y contenga CSS, con llaves y nombres de propiedades correctos.
  2. Que el selector coincida: .aviso requiere class="aviso"; #aviso requiere ese id.
  3. Que media corresponda al medio actual: print no modifica la pantalla.
  4. Que la consola no indique un bloqueo CSP. En las herramientas de desarrollo, inspecciona el elemento y las declaraciones sobrescritas antes de cambiar su especificidad.

El bloque no debe envolver el texto visible ni mezclar etiquetas HTML entre sus reglas. No escondas instrucciones esenciales al imprimir ni comuniques éxito o error solo con color.

Elige <div> para un contenedor genérico o <span> para agrupar parte de un texto cuando haga falta; después selecciónalos con CSS. Esos elementos agrupan contenido, mientras <style> almacena las reglas. Mantén las etiquetas con significado adecuado aunque cambies su presentación.

Compatibilidad y fuentes

Consultado el 4 de octubre de 2026: <style> y media tienen soporte consolidado en los motores actuales, según el registro de compatibilidad de MDN. La compatibilidad del elemento no garantiza la de cualquier propiedad CSS que escribas dentro. La impresión y sus opciones pueden variar; comprueba la vista previa del navegador de destino. Para sintaxis y restricciones, consulta el HTML Living Standard; para explicación y atributos, la referencia de MDN.