Cómo funciona CSS

1.Qué hace CSS y cómo lo lee el navegador

Cuando abres una página, el navegador hace tres cosas, en este orden:

1. Lee el HTML y construye un árbol con todos los elementos (el DOM).
2. Lee el CSS y construye una lista de reglas (el CSSOM).
3. Combina ambos: para cada elemento decide qué reglas le tocan, calcula su aspecto final, lo coloca en la pantalla y lo pinta.

Ese cálculo se repite si cambias el tamaño de la ventana, pasas el cursor por encima o añades una clase con JavaScript. Por eso un mismo HTML puede verse completamente distinto con otro CSS.

2.Anatomía de una regla

• El selector elige los elementos a los que se aplica la regla.
• Las declaraciones van entre llaves { }. Cada una es una pareja propiedad: valor;.
• Un punto y coma cierra cada declaración. Olvidarlo rompe la siguiente.
• Los comentarios se escriben /* así */ y el navegador los ignora.

/* Títulos: color y tamaño */
h1 {
  color: #4f46e5;
  font-size: 2rem;
}

p { line-height: 1.7; }

3.Tres formas de añadir CSS

<head>
  <meta charset="UTF-8">
  <title>Mi página</title>
  <link rel="stylesheet" href="css/estilos.css">
</head>

4.La cascada: quién gana

Imagina que dos reglas piden cosas distintas para el mismo elemento:

h1 { color: blue; }
h1 { color: red; }

CSS significa Cascading Style Sheets («hojas de estilo en cascada») porque tiene reglas para resolver estos conflictos. El navegador revisa tres criterios, en este orden:

1. Importancia y origen. Las declaraciones con !important ganan a las normales (y los estilos del navegador son los más débiles).
2. Especificidad. Un selector más específico (#portada, .aviso) gana a uno más general (p). La estudiarás a fondo en la próxima lección.
3. Orden. Si todo lo anterior empata, gana la declaración que aparece después.

En el ejemplo, empatan en importancia y especificidad, así que gana la última: el título será rojo.

Predice el resultado antes de mirar. Después prueba mover las reglas de lugar y observa qué cambia (y qué no cambia).

5.Herencia

Algunas propiedades pasan de un elemento a sus hijos sin que lo pidas. Si pones color: navy en el <body>, todos los textos dentro (párrafos, listas, enlaces…) se verán azules salvo que otra regla diga lo contrario.

La lógica: si el texto de un contenedor es azul, es natural que lo de dentro también; pero que un párrafo tenga el borde de su contenedor sería absurdo.

Controlar la herencia

6.Los estilos por defecto del navegador

Aunque no escribas nada de CSS, la página no se ve «vacía»: los títulos son grandes, los párrafos tienen espacio, los enlaces son azules y subrayados. Es la hoja de estilos del navegador, y cada navegador tiene la suya con pequeñas diferencias.

Por eso muchas personas empiezan sus proyectos con un reseteo que elimina esas diferencias. Este es uno moderno y breve, suficiente para empezar:

*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; line-height: 1.6; }

img, video, svg { max-width: 100%; height: auto; display: block; }

input, button, textarea, select { font: inherit; }

• box-sizing: border-box hace que el ancho incluya el relleno y el borde (lo verás en la lección 4).
• margin: 0 en el body elimina el margen de 8 px del navegador.
• Las imágenes nunca serán más anchas que su contenedor.
• Los campos de formulario heredan la tipografía de la página, en lugar de usar la suya.

7.Las herramientas del navegador: tu mejor aliada

Todos los navegadores modernos traen herramientas para ver y modificar el CSS de cualquier página. Se abren con F12 (o clic derecho → Inspeccionar). Estas son las partes que más usarás:

1. Haz clic derecho sobre un título de esta misma página y elige Inspeccionar.
2. En el panel Estilos, cambia el valor de color o desmarca una declaración con la casilla.
3. Observa cómo cambia la página al instante. Nada se guarda: al recargar vuelve todo como estaba.

8.Errores frecuentes

• Olvidar ; o }: el resto de reglas puede dejar de funcionar.
• Escribir mal una propiedad o un valor (colour, font-size: 16, sin unidad).
• Usar id para todo y luego no poder sobrescribir los estilos.
• Esperar que se herede lo que no se hereda (por ejemplo, un borde).
• Recargar sin guardar o con la caché del navegador (usa Ctrl + F5).
• La ruta del <link> equivocada: si ningún estilo cambia, revisa el href y la pestaña Red de las herramientas.
• Usar !important en lugar de entender la cascada.

9.Glosario