Tus páginas web tendrán otro aspecto visual si aprendes a usar la etiqueta style en HTML directamente en tu código. Sí, resulta que con esta herramienta podrás dar tus primeros pasos en el diseño con CSS y lograrás sitios web impresionantes. Te dejo esta guía para que aprendas a usarla.

¿Qué encontrarás en este post?

¿Qué es style en HTML?

La etiqueta <style> es un elemento de HTML con el que puedes incluir hojas de estilo directamente en tu documento. Gracias a ella podrás definir cómo se verá cada parte de tu página, controlando colores, fuentes, márgenes, y mucho más. A este enfoque se le llama estilo embebido o interno, ya que los estilos se encuentran dentro del propio archivo HTML, en lugar de estar separados en un archivo CSS externo.

¿Dónde debe ir la etiqueta <style>?

Lo que dice HTML es que la etiqueta <style> debe colocarse dentro del elemento <head> del documento. Así te aseguras de que los estilos se carguen antes de que el navegador muestre el contenido de la página, garantizando que todo se renderice correctamente desde el inicio.

Cómo usar la etiqueta <style> en HTML

Usar la etiqueta <style> es bastante sencillo. Sigue estos pasos básicos:

Coloca la etiqueta <style> dentro del <head> del archivo HTML.
Escribe tus reglas CSS dentro de la etiqueta <style>.
Guarda y abre el archivo en un navegador para ver los cambios.

Ejemplo básico de estilo embebido

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de style en HTML</title>
  <style>
    body {
      background-color: #f4f4f4;
      font-family: Arial, sans-serif;
    }
    h1 {
      color: #333;
      text-align: center;
    }
    p {
      color: #555;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>¡Hola, mundo!</h1>
  <p>Este es un ejemplo de cómo usar la etiqueta <code>&lt;style&gt;</code> en HTML para aplicar estilos directamente en tu página web.</p>
</body>
</html>

Partes del código

body: Define un fondo gris claro y una fuente sans-serif para todo el documento.
h1: Cambia el color del encabezado y lo centra.
p: Ajusta el tamaño y el color del texto de los párrafos.

Con este ejemplo te demuestro que con unas pocas líneas de código puedes mejorar la apariencia de tu página.

Atributos útiles de la etiqueta <style>

Aunque la etiqueta style en HTML puede funcionar perfectamente sin atributos, te recomiendo conocerlos para que controles mejor cómo y dónde se aplican los estilos. Aquí te será útil aprender sobre span en HTML.

Atributo type

🔴 ¿Quieres Aprender a Programar con Python? 🔴

Descubre el Full Stack Jr. Bootcamp - Aprende a Programar desde Cero de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada

👉 Prueba gratis el Bootcamp Aprende a Programar desde Cero por una semana

El atributo type especifica el tipo de contenido dentro de <style>. Para estilos CSS, el valor es “text/css”.

Aunque es opcional en HTML5, incluirlo puede garantizar compatibilidad con versiones anteriores de HTML.

<style type="text/css">
  body { background-color: #fff; }
</style>

Atributo media

El atributo media define en qué dispositivos o contextos se aplicarán los estilos. Así puedes diseñar páginas responsivas o adaptadas a diferentes situaciones.

Ejemplo para distintos medios:

<!-- Estilos para pantalla -->
<style media="screen">
  body { font-size: 16px; }
</style>

<!-- Estilos para impresión -->
<style media="print">
  body { font-size: 12px; }
</style>

Al hacer esto, te aseguras de que tu página se vea bien tanto en pantallas como al imprimirla.

Ejemplos avanzados con la etiqueta style en HTML

Aplicar estilos condicionales

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo avanzado de style</title>
  <style>
    @media (max-width: 600px) {
      body {
        background-color: lightgray;
      }
      p {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <p>Este párrafo cambia de estilo en pantallas pequeñas.</p>
</body>
</html>

En este caso, los estilos se aplican solo cuando el ancho de la pantalla es menor a 600px, muy útil para diseños responsivos.

¿Cuándo usar style en HTML?

Esta herramienta básica la puedes aprovechar en las siguientes situaciones:

Prototipos rápidos: Ideal para pruebas o demostraciones pequeñas.
Estilos específicos: Si necesitas aplicar cambios que solo afectan a una página.
Aprendizaje: Es un buen punto de partida para principiantes antes de avanzar a CSS externo.

Ventajas y desventajas de usar style en HTML

Ventajas

Simplicidad: Es ideal para prototipos o páginas pequeñas, ya que los estilos están en el mismo archivo que el contenido.
Rapidez en el desarrollo: No necesitas crear ni vincular un archivo CSS externo.
Compatibilidad inicial: Perfecto para aprender CSS y experimentar con estilos.

Desventajas

Dificultad de mantenimiento: A medida que tu proyecto crece, tener estilos embebidos puede hacer que el código sea difícil de gestionar.
Menor eficiencia: Para proyectos grandes, los estilos en un archivo externo se cargan más rápido y pueden ser reutilizados en varias páginas.
No escalable: Si necesitas aplicar los mismos estilos en múltiples documentos, un archivo CSS externo es mucho más práctico.

En el Bootcamp de Aprende a Programar desde Cero de KeepCoding, te enseñaremos no solo a dominar style en HTML, sino también las bases de diseño y desarrollo web que necesitas para construir aplicaciones modernas. ¡Apúntate ahora y transforma tu futuro en tecnología!