Etiqueta HTML <style>
La etiqueta <style> define el estilo de los elementos de un sitio web. Descripción, sintaxis, atributos y ejemplos.
La etiqueta <style> incorpora reglas CSS directamente dentro de un documento HTML. Define cómo deben mostrarse los elementos de esa página, sin necesidad de un archivo de hoja de estilos separado. Esto se denomina comúnmente CSS interno (o embebido).
Para cargar CSS desde un archivo separado, utiliza el elemento <link rel="stylesheet">.
Una página puede contener más de un elemento <style>, y las reglas de todos ellos se combinan.
Por qué <style> pertenece al <head>
El CSS dentro de una etiqueta <style> está destinado al navegador, no al lector, por lo que se coloca dentro del elemento <head>. Hay buenas razones para mantenerlo ahí:
- Bloquea el renderizado. El navegador debe leer y aplicar el CSS antes de poder pintar la página. Colocar los estilos en el
<head>permite que el navegador sepa cómo debe verse todo antes de dibujar el cuerpo. - Evita el FOUC (Flash Of Unstyled Content). Si los estilos se definen tarde en el documento, el navegador puede mostrar brevemente el contenido sin estilos y luego volver a aplicarlos, provocando un parpadeo visible y un desplazamiento del diseño.
HTML5 técnicamente permite un elemento <style> dentro del <body> (el navegador igualmente aplicará las reglas), pero se desaconseja: puede provocar un reflujo y el FOUC descrito anteriormente. Mantén tus estilos en el <head>.
En versiones anteriores de HTML y en XHTML, el atributo type="text/css" era obligatorio con la etiqueta <style>. En HTML5 es el valor por defecto y puede omitirse.
Tres formas de entregar CSS
La etiqueta <style> es solo una de las tres formas de aplicar CSS. Elegir la correcta es importante:
| Método | Cómo | Mejor para |
|---|---|---|
Atributo inline style | <p style="color: red;"> | Una anulación puntual en un solo elemento. Difícil de mantener y tiene la mayor especificidad, así que úsalo con moderación. |
<style> interno | Un bloque <style> en el <head> | Estilos necesarios solo para una página, o CSS crítico que deseas incluir en línea para evitar una solicitud adicional. |
<link rel="stylesheet"> externo | Un archivo .css separado | Estilos compartidos entre muchas páginas. El navegador los almacena en caché y mantiene el contenido separado de la presentación — la opción habitual para sitios reales. |
Consulta HTML Styles para una comparación más completa.
Sintaxis
La etiqueta <style> viene en pares. El contenido se escribe entre las etiquetas de apertura (<style>) y cierre (</style>).
Ejemplo de la etiqueta HTML <style>:
Etiqueta HTML <style>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: #1c87c9;
}
p {
color: #8ebf42;
}
</style>
</head>
<body>
<h1>Text heading.</h1>
<p>First paragraph.</p>
</body>
</html>Los selectores (h1, p) dentro del bloque apuntan a elementos del cuerpo, y las declaraciones entre llaves establecen sus estilos.
Resultado
Aplicar estilos de forma condicional con media
El atributo media permite que un bloque <style> se aplique solo cuando su media query coincide — por ejemplo, solo en pantallas pequeñas, solo en pantallas (no en impresión) o solo al imprimir. Las reglas de un bloque cuya consulta no coincide se ignoran.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!-- Always applies -->
<style>
p {
color: #1c87c9;
}
</style>
<!-- Applies only on screens up to 600px wide -->
<style media="screen and (max-width: 600px)">
p {
color: #8ebf42;
font-size: 20px;
}
</style>
</head>
<body>
<p>Resize the window: this text turns green and grows on narrow screens.</p>
</body>
</html>Puedes hacer lo mismo con el elemento <link> (<link rel="stylesheet" media="..." href="...">).
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| media | media_query | Especifica el medio para el cual se aplican los estilos, p. ej. screen and (max-width: 600px). Si se omite, los estilos se aplican a todos los medios. |
| type | text/css | Especifica el tipo MIME de la hoja de estilos. Opcional en HTML5, ya que text/css es el valor predeterminado. |
El atributo obsoleto scoped
Es posible que todavía encuentres referencias a un atributo scoped, que tenía como objetivo limitar las reglas de un bloque <style> al elemento padre y sus descendientes. Nunca fue implementado de forma generalizada y ha sido eliminado del estándar HTML — no lo uses. Para limitar el alcance del CSS hoy en día, utiliza en su lugar uno de estos enfoques modernos:
- Shadow DOM (mediante elementos personalizados / web components), donde los estilos están completamente encapsulados y no se filtran hacia dentro ni hacia fuera.
- Nombres de clase con alcance limitado — un prefijo de clase único por componente, aplicado manualmente o generado por herramientas como CSS Modules.