Etiqueta HTML <style>
La etiqueta <style> se utiliza para dar estilo a un documento HTML con CSS. Define cómo deben mostrarse los elementos en los navegadores.
TIP
Para vincular una hoja de estilos externa, utiliza la etiqueta <link>.
El contenido de la etiqueta <style> está destinado a los navegadores, por lo que se coloca dentro del elemento <head>. Los scripts de la página suelen colocarse después del código CSS.
Es posible utilizar más de un elemento <style> en una misma página.
DANGER
En versiones anteriores de HTML y en XHTML, el atributo type="text/css" era obligatorio con la etiqueta <style>.
Sintaxis
La etiqueta <style> se escribe en pares. El contenido se escribe entre las etiquetas de apertura (<style>) y cierre (</style>).
Ejemplo de la etiqueta HTML <style>:
HTML <style> tag
<!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>Resultado
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| media | media_query | Especifica el tipo de medio para el cual se aplican los estilos. Por defecto, los estilos se aplican a todos los dispositivos. |
| scoped | scoped | Indica que el estilo se aplica solo al elemento que contiene la etiqueta <style> y a sus descendientes. Cuando se usa, la etiqueta <style> debe colocarse dentro del elemento que estiliza, en lugar de en <head>. Nota: Este atributo está obsoleto en HTML5.2 y debe evitarse en el desarrollo moderno. |
| type | text/css | Especifica el tipo MIME de la hoja de estilos. Es opcional en HTML5, ya que text/css es el valor predeterminado. |
Práctica
¿Cuáles son las características de la etiqueta de estilo HTML según se muestra en el sitio w3docs?