Fundamentos de CSS
Fundamentos de CSS
CSS le indica al navegador cómo presentar HTML. Para hacerlo, tres pilares se combinan: la sintaxis (cómo se escribe una regla), los selectores (a qué elementos se aplica) y la cascada (quién gana cuando hay conflicto).
CSS (Cascading Style Sheets) es el lenguaje que controla la presentación visual de un documento HTML. Mientras HTML describe qué hay en la página — un encabezado, un párrafo, una imagen — CSS describe cómo se ve: el color, el tamaño, la posición, los márgenes, la tipografía. Los dos lenguajes están diseñados para separarse: HTML aporta el significado; CSS aporta la forma.
La unidad fundamental de CSS es la regla: una combinación de selector, propiedad y valor. El selector indica a qué elementos del documento se aplica la regla. La propiedad nombra qué aspecto visual se controla. El valor indica cómo. Esta tríada — selector → propiedad → valor — es el alfabeto de CSS; todo lo demás (herencia, cascada, especificidad, custom properties) es cómo el navegador gestiona múltiples reglas que interactúan entre sí.
Lo que distingue a CSS de otros lenguajes de presentación es la cascada: el mecanismo por el que el navegador resuelve los conflictos cuando varias reglas apuntan al mismo elemento. La cascada no es un problema a evitar — es una característica de diseño que permite que los estilos del navegador, del autor y del usuario convivan y se sobreescriban de manera predecible. Entender la cascada es la diferencia entre luchar contra el CSS y usarlo con confianza.
Cómo funciona
Sintaxis — cómo se escribe CSS
Una regla CSS tiene una estructura fija:
selector {
propiedad: valor;
}El selector identifica los elementos a los que aplica la regla. Las llaves {} delimitan el bloque de declaraciones. Cada declaración es un par propiedad: valor terminado en punto y coma. Un mismo bloque puede tener tantas declaraciones como necesite. Un mismo selector puede agrupar múltiples declaraciones; múltiples selectores pueden apuntar al mismo bloque separándolos con coma.
CSS se aplica al documento de tres formas: hoja de estilos externa (el método recomendado, con <link rel="stylesheet">), bloque <style> en el <head>, o atributo style en el elemento. El método externo es el preferido porque separa completamente el CSS del HTML y permite reutilizarlo en múltiples páginas. Ver aplicar-css y sintaxis-css.
Selectores — a qué se aplica
Los selectores son el lenguaje con el que CSS identifica los elementos del documento. El selector más simple es el selector de tipo, que apunta a todos los elementos de una etiqueta (p, h1, a). El selector de clase (.mi-clase) es el más usado en producción: apunta a todos los elementos con ese atributo class. El selector de ID (#mi-id) es de aplicación única — solo debe existir un elemento con ese ID en la página.
Los selectores se combinan. Un selector descendiente (article p) apunta a todos los <p> dentro de un <article>. Un selector hijo directo (ul > li) apunta solo a los <li> inmediatos de un <ul>, no a los anidados. Las pseudo-clases (:hover, :focus, :nth-child()) extienden los selectores para apuntar a elementos según su estado o posición. Los pseudo-elementos (::before, ::after, ::first-line) apuntan a partes virtuales de los elementos.
Ver selectores, pseudo-clases, pseudo-elementos.
Cascada — quién gana cuando hay conflicto
Cuando dos reglas apuntan al mismo elemento y a la misma propiedad, una de las dos gana. La cascada es el algoritmo que lo resuelve, y lo hace en tres pasos en orden:
- Origen: el CSS del autor tiene más peso que el del navegador. El CSS marcado
!importantinvierte esa jerarquía. - Especificidad: entre reglas del mismo origen, gana la más específica. Los selectores de ID son más específicos que los de clase; los de clase, más que los de tipo.
- Orden: si el origen y la especificidad son iguales, gana la regla que aparece más tarde en el CSS.
La herencia es un mecanismo complementario: ciertas propiedades (las tipográficas, el color del texto) se propagan automáticamente de un elemento padre a sus hijos. Las propiedades de layout y box model no se heredan. Ver cascada, especificidad, herencia.
Cuándo usar qué
| Situación | Herramienta recomendada |
|---|---|
Estilo global para todos los <p> | Selector de tipo |
| Estilo de un componente reutilizable | Selector de clase |
| Estilo de un elemento único en la página | Selector de ID (con moderación) |
| Estilo al pasar el cursor | Pseudo-clase :hover |
| Sobreescribir estilo heredado | Declaración más específica en el elemento hijo |
| Sobreescribir todo (emergencia) | !important (evitar si hay alternativa) |
Clase vs. ID: en la práctica, los selectores de clase son la herramienta de trabajo cotidiana. Los IDs tienen especificidad alta y son únicos por página, lo que los hace difíciles de sobreescribir y reutilizar. Guardá los IDs para anclas de navegación y JavaScript, no para aplicar estilos.
Cascada vs. herencia: la cascada resuelve conflictos entre reglas que apuntan al mismo elemento. La herencia propaga valores de padre a hijo automáticamente, sin que haya conflicto — simplemente el hijo toma el valor del padre si no declara el suyo.