La Etiqueta STYLE

Se utiliza para incrustar CSS directamente en un documento HTML, permitiendo definir estilos para elementos de la página sin necesidad de un archivo externo.

La etiqueta <style> en HTML se utiliza para incrustar CSS directamente en un documento HTML, permitiendo definir estilos para elementos de la página sin necesidad de un archivo externo. Es ideal para estilos específicos de una sola página o prototipos rápidos. Aquí te explicamos cómo usarla correctamente.

Sintaxis básica

La estructura básica es:

<style>
  /* Reglas CSS aquí */
</style>

Ejemplo:

<!DOCTYPE html>
<html>
<head>
  <style>
    p.azul {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>Este texto será azul y de 16px.</p>
</body>
</html>

Resultado:

El párrafo se mostrará en azul con tamaño de fuente 16px.

Ubicación en el documento

En el <head>: Es el lugar recomendado para garantizar que los estilos se carguen antes del contenido.
En el <body>: Aunque es posible, puede afectar el rendimiento. Úsalo solo si es necesario (ejemplo: estilos específicos para un componente).

Atributos clave

Atributo	Descripción
`type`	Define el tipo MIME (por defecto es `text/css`). Opcional en HTML5.
`media`	Aplica estilos según el tipo de dispositivo (ejemplo: `media="screen"`).
`scoped`	Obsoleto en HTML5: Limitaba los estilos al elemento padre (no recomendado).

Ejemplo con media:

<style media="(max-width: 600px)">
  body {
    background: lightblue;
  }
</style>

(El fondo será azul claro en dispositivos móviles).

Casos de uso comunes

a) Estilos globales para una página

<head>
  <style>
    h1 { 
      color: #2ecc71;
      text-align: center;
    }
    .destacado {
      background: yellow;
      padding: 10px;
    }
  </style>
</head>

b) Estilos para componentes específicos

<body>
  <div class="tarjeta">
    <h2>Título</h2>
    <p>Contenido...</p>
  </div>
  <style>
    .tarjeta {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      margin: 10px;
    }
  </style>
</body>

c) Media queries (diseño responsivo)

<style>
  @media (max-width: 768px) {
    .menu {
      display: none;
    }
  }
</style>

Diferencias entre `<style>` y archivos CSS externos

`<style>`	Archivo externo (link)
CSS incrustado en el HTML.	CSS en un archivo separado (.css).
Ideal para estilos puntuales.	Recomendado para proyectos grandes.
No requiere HTTP requests.	Mejora el rendimiento con caché del navegador.

Ejemplo de archivo externo:

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

Buenas prácticas

Minimiza el uso de <style>: Prioriza archivos externos para mantener el código limpio.

Colócalo en el <head>: Evita problemas de renderizado.

Evita estilos en línea: Usa <style> en lugar de style="" para reutilizar reglas.

Comenta tu CSS: Facilita el mantenimiento.

/* Estilos para la barra de navegación */
.navbar { ... }

Valida tu CSS: Usa herramientas como CSS Validator.

Ejemplo avanzado

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    /* Estilos generales */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
    }

    /* Cabecera */
    header {
      background: #007bff;
      color: white;
      padding: 20px;
      text-align: center;
    }

    /* Diseño responsivo */
    @media (max-width: 600px) {
      header {
        padding: 10px;
        font-size: 1.2em;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>Mi Sitio Web</h1>
  </header>
  <main>
    <p>Bienvenido a mi sitio.</p>
  </main>
</body>
</html>

Resultado:

Cabecera azul con texto centrado.
En móviles, el texto se reduce y el padding es menor.

Errores comunes

CSS mal cerrado:

<style>
  p { color: red; /* Falta cerrar la llave */
</style>

Estilos redundantes:

<style>
  p { color: blue; }
</style>
<!-- Más abajo... -->
<style>
  p { color: red; } /* Sobrescribe el estilo anterior */
</style>

Accesibilidad y SEO

Accesibilidad: Asegúrate de que los estilos no dificulten la lectura (ejemplo: contraste de colores).
SEO: Los estilos optimizados mejoran la velocidad de carga, un factor clave en el posicionamiento.

Conclusión

La etiqueta <style> es una herramienta versátil para incluir CSS directamente en HTML. Úsala para:

Prototipado rápido.
Estilos específicos de una página.
Media queries integradas.

Recuerda:

Evita su uso excesivo en proyectos grandes.
Combínala con archivos externos para mantener el código organizado.
Prioriza la semántica y la accesibilidad en tus diseños.

¡Ahora puedes aprovechar <style> para crear páginas web visualmente atractivas y funcionales!