¿Qué es CSS?

Descubre qué es CSS, cómo se conecta con HTML y las tres formas de añadirlo a una página web.

CSS son las siglas de Cascading Style Sheets — hojas de estilo en cascada. Es el lenguaje que controla cómo se ve una página web: colores, tamaños, fuentes, espaciado, posición de cada elemento.

Si HTML dice qué hay en una página, CSS dice cómo se muestra.

La cascada

El nombre no es casual. CSS funciona en cascada: los estilos fluyen de arriba abajo y las reglas más específicas o más tardías ganan sobre las anteriores.

p {
  color: blue;
}

p {
  color: red; /* esta gana */
}

Entender la cascada —y la especificidad— es clave para no perder horas depurando por qué un estilo no aplica.

Las tres formas de añadir CSS

1. Hoja de estilos externa (la correcta)

Un archivo .css separado, enlazado desde el HTML:

<link rel="stylesheet" href="estilos.css" />

Es la forma recomendada. Separa estructura de presentación y permite reutilizar los estilos en múltiples páginas.

2. Estilos en el <head> (inline block)

Dentro de una etiqueta <style> en el HTML:

<style>
  p {
    color: red;
  }
</style>

Útil para prototipos rápidos o componentes aislados, pero no escala bien.

3. Estilos en línea (evítalos)

Directamente en el atributo style de un elemento:

<p style="color: red;">Este párrafo es rojo</p>

Tienen la máxima especificidad, lo que hace muy difícil sobreescribirlos después. Úsalos solo en casos muy concretos o cuando CSS dinámico lo requiera.

La sintaxis básica

Una regla CSS tiene dos partes: el selector y la declaración:

selector {
  propiedad: valor;
}

Por ejemplo:

h1 {
  color: navy;
  font-size: 2rem;
}
  • h1 es el selector (a qué elementos afecta)
  • color y font-size son propiedades
  • navy y 2rem son sus valores

CSS y el navegador

Cuando el navegador carga una página, construye el DOM (árbol de elementos HTML) y el CSSOM (árbol de estilos CSS). Los combina para determinar cómo se pinta cada píxel en pantalla.

No necesitas memorizar esto, pero saber que existe explica por qué algunos cambios de CSS son más costosos que otros para el rendimiento.

En la siguiente lección veremos los selectores: la herramienta para apuntar exactamente al elemento que quieres estilizar.