CSS

Una regla CSS tiene un selector (a qué elementos afecta) y declaraciones propiedad: valor. «Cascada» se refiere a cómo se combinan varias reglas que afectan al mismo elemento.

Lo habitual es escribirlo en un archivo .css enlazado desde el HTML, para que una sola hoja de estilos dé formato a todo el sitio.

Un ejemplo

button { background: navy; color: white; } pone todos los botones con fondo azul marino y texto blanco.

Por qué importa

CSS define el aspecto de una página web: colores, tipografías, tamaños, márgenes, posiciones, animaciones y cómo se adapta a distintas pantallas. Funciona con reglas formadas por un selector, que indica a qué elementos afecta, y declaraciones de propiedad y valor, como color: navy;. Al separarlo del HTML, puedes cambiar el diseño de un sitio entero modificando un único archivo.

La parte que más confunde al principio es cómo el navegador decide qué regla aplica cuando varias coinciden: es la cascada, que depende del orden, la especificidad del selector y el origen de la regla. Entenderla ahorra mucho tiempo de «¿por qué no se aplica mi estilo?». Hoy CSS incluye variables propias (--color-base), flexbox, grid, consultas de medios y transiciones, por lo que cubre mucho de lo que antes exigía JavaScript.

Confusiones frecuentes

Se confunde con HTML: el primero estructura el contenido y el segundo lo viste. Otro error típico es abusar de !important para forzar un estilo; resuelve el problema del momento pero crea otros, porque rompe la cascada normal. También confunde el modelo de caja: el tamaño real de un elemento suma contenido, relleno (padding), borde y margen, salvo que uses box-sizing: border-box, que hace que el ancho incluya relleno y borde. Y se piensa que CSS «no es programación»; aunque no sea un lenguaje general, tiene su lógica propia y también requiere método.

Preguntas frecuentes

¿Por qué no se aplica mi regla CSS?

Casi siempre es especificidad u orden: otra regla más específica o posterior gana. Inspecciona el elemento con las herramientas del navegador (F12) para ver qué reglas se aplican y cuáles se tachan.

¿Qué diferencia hay entre `margin` y `padding`?

padding es el espacio interior, entre el contenido y el borde. margin es el espacio exterior, entre el borde y los elementos vecinos.