CSS: qué es y formas de aplicar estilos en HTML

Clase 2 de 32 • Curso de CSS

Clase anteriorSiguiente clase

Resumen

Aprende qué es CSS, cómo opera la cascada y cuáles son las tres formas de aplicar estilos en HTML. Aquí verás cuándo usar el atributo style, la etiqueta style en el head y una hoja de estilos externa con link, destacando ventajas de mantenimiento y consistencia.

¿Qué es CSS y cómo funciona la cascada?

CSS significa Cascade Style Sheets y describe la hoja de estilos en cascada. La cascada implica que los estilos se aplican de arriba hacia abajo: los últimos estilos que afectan a un elemento son los que prevalecen. Si defines un color y luego, más abajo, vuelves a definir otro para el mismo elemento, el último gana.

  • Los estilos posteriores sobrescriben a los anteriores, si apuntan al mismo elemento.
  • Cambios finales pueden “romper” expectativas si no se entiende la cascada.
  • Es clave planear cómo y dónde aplicar reglas para evitar conflictos.

¿Cuáles son las tres formas de agregar estilos en HTML?

Existen tres formas de aplicar estilos: 1) como atributo inline en la propia etiqueta, 2) dentro de la etiqueta style en el head, 3) mediante una hoja de estilos externa enlazada con link. La recomendación práctica es trabajar con un archivo externo.

¿Cómo se usa el atributo style en línea?

Agrega el estilo directamente sobre la etiqueta. Es la forma más antigua y la menos mantenible en proyectos grandes.

<p style="color: blue;">Texto con color en línea.p>
  • Ventaja: cambio inmediato y localizado.
  • Desventaja: difícil de mantener cuando el proyecto crece.

¿Cómo funciona la etiqueta style en el head?

Define reglas en el documento, dentro de head, apuntando a etiquetas como H1 o H2.

<head>
  <style>
    h1 { color: blue; }
    h2 { color: green; }
  style>
  • Ventaja: centraliza estilos del documento.
  • Desventaja: sigue siendo poco escalable en equipos y proyectos grandes.

¿Por qué conviene una hoja de estilos externa?

Crea un archivo, por ejemplo styles.css, y enlázalo con link en el head. Es la buena práctica para mantener, versionar y escalar estilos.

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


/* styles.css */
h1 { color: blue; }
h2 { color: green; }
  • Ventaja: separación clara entre estructura y presentación.
  • Ventaja: reutilización y cambios globales más simples.

¿Qué efectos verás al aplicar estilos por etiqueta?

Si seleccionas una etiqueta como p, la regla afectará a todas las etiquetas p del documento. Sin embargo, un estilo en línea en una etiqueta específica puede prevalecer por la cascada y la especificidad.

/* styles.css */
p { color: #5795D3; }

<p style="color: blue;">Este párrafo mantiene su azul por estilo en línea.p>
<p>Este párrafo usa el color #5795D3 de la hoja externa.p>
  • Seleccionar por etiqueta aplica el cambio a múltiples elementos a la vez.
  • Un estilo en línea puede sobrescribir la regla general de la hoja externa.
  • Aparecen retos de especificidad que conviene planear para evitar conflictos futuros.

¿Te quedó alguna duda sobre la cascada, el uso de style o el enlace con link? Comparte tu pregunta en los comentarios y cuéntanos cómo estructurarás tus estilos a partir de ahora.