Style tag de HTML: definir cómo se ven los elementos
Equipo editorial de IONOS4 mins
La tag de HTML “style” te permite definir cómo se ven algunos elementos de una página web. Esta etiqueta se integra en el encabezado antes de los posibles scripts e integra estilos globales de CSS. Por eso es compatible con varios atributos HTML.
¿Para qué se usa la tag style de HTML?
La etiqueta de HTML style permite crear hojas de estilo para todo un documento. El objetivo de la tag style es, por un lado, definir con precisión el aspecto de los distintos elementos de una web y, por tanto, hacerlos uniformes. Por otra parte, puede combinarse con atributos HTML para optimizar una web para distintos dispositivos. Con la style tag de HTML también se insertan códigos CSS en el documento HTML. Además, dentro de los elementos también puedes elegir cómo se debe renderizar el contenido de la web. La estructura en el navegador mejorará considerablemente ya que no tendrá que cargarse todo el archivo CSS primero.
¿Cómo se construye la style tag de HTML?
La etiqueta style de HTML se introduce en el elemento head, y puede combinarse con otros elementos de una web. Para que sea más rápido de construir y facilitar la representación en el navegador, lo mejor es ubicar la etiqueta antes de los scripts de la página web. Desde la llegada de HTML 5 no es necesario utilizar el atributo <style type="text/css">, pero siempre tendrás que poner <style> antes del contenido y </style> después. He aquí un ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Un ejemplo de uso de la tag style de HTML</title>
<style>
h1 { color: #000000; }
p { color: #0A06EF; }
</style>
</head>
<body>
<h1>Ejemplo de encabezado para tu web</h1>
<p>Texto ejemplo para el primer párrafo</p>
</body>
</html>En este ejemplo, la style tag de HTML consigue que el encabezado “Ejemplo de encabezado para tu web” aparezca en negro y el primer párrafo “Texto ejemplo para el primer párrafo” en azul marino. Además de colores, puedes elegir tamaño y fuente.
¿Qué atributos son compatibles con la style tag de HTML?
Hay varios atributos que pueden combinarse con la style tag de HTML, p. ej. todos los atributos globales y los de eventos. Estos son los más utilizados con la style tag de HTML:
| Atributo | Valor | Descripción |
| dir | auto, rtl, ltr | El atributo universal dir indica el sentido de la escritura de un texto. |
| height | Pixel | El atributo height indica la altura de un elemento. |
| id | Una cadena que no debe estar vacía ni contener espacios | Con id se asigna un identificador único para un elemento HTML. |
| lang | Abreviatura | Con el atributo universal Lang se define el idioma de un documento o elemento. |
| media | all, aural, braille, handheld, projection, print, screen, tty, tv | El atributo media determina el dispositivo para el que debe optimizarse el documento. |
| width | Pixel | Con el atributo width, se determina el ancho de un elemento. |
| xml:space | preserve, default | Con el atributo xml:space se determina cómo deben interpretarse los espacios del texto fuente. |
Los atributos scopes y type ya no se utilizan.
A continuación, verás un ejemplo de cómo combinar la style tag de HTML con un atributo:
<style media="screen">
h1 { color: #000000; }
p { color: #0A06EF; }
body { background-color: #FFFFFF; }
</style>Este código hará que el encabezado de todas las pantallas sea negro, el texto del párrafo azul marino y el fondo blanco.
Style tag de HTML: una práctica herramienta para cualquier página web
Tanto si llevas tiempo creando páginas web como si acabas de empezar a usar CSS, conviene saber que la tag style de HTML es una herramienta práctica y sencilla para definir el aspecto de un documento y los elementos que contiene. Esta etiqueta te ayudará a construir una web de manera ordenada y bien estructurada. Si además quieres introducir archivos CSS externos, puedes usar el enlace tag.
¿Tener tu propia web tal y como te la imaginabas? ¡Sin problema! IONOS te da las herramientas para hacerlo con su creador de páginas web. Entra en la web por la puerta grande sin necesidad de ayuda ni conocimientos previos o deja que nuestros expertos te echen una mano.
