CSS —Cascading Style Sheets— es, según MDN, «un lenguaje basado en reglas: definís reglas especificando grupos de estilos que deberían aplicarse a un elemento o grupo de elementos particular». Cada regla tiene un selector, que elige a qué elementos afecta, y un bloque de declaraciones con pares de propiedad y valor. Tres conceptos explican casi todos los problemas: el modelo de caja —por qué el ancho declarado no es el ancho real—, la cascada y la especificidad —por qué «no me toma el estilo»— y la diferencia entre Flexbox, que reparte en una dimensión, y Grid, que trabaja en dos.
Ver índice de contenidos
La anatomía de una regla
MDN describe CSS como «un lenguaje basado en reglas». Toda la sintaxis se reduce a esta estructura, y conviene tener los nombres claros porque después la documentación los usa:
h1 {
color: red;
font-size: 2.5em;
}
/* └┬┘ └──┬──┘ └─┬─┘
│ │ └── valor
│ └────────── propiedad } juntos: una DECLARACIÓN
└──────────────── selector: qué elementos se ven afectados
Las llaves delimitan el BLOQUE DE DECLARACIONES.
Todo junto es una REGLA (o ruleset). */El selector, en palabras de MDN, «selecciona los elementos HTML que vamos a estilar». Dentro de las llaves van «una o más declaraciones, que toman la forma de pares de propiedad y valor». Cada declaración termina en punto y coma, y olvidarlo es la causa más común de que la siguiente no funcione.
Cómo se conecta al HTML
Hay tres formas y solo una es recomendable para trabajar:
| Forma | Cómo | Cuándo |
|---|---|---|
| Hoja externa | Un archivo .css enlazado desde el head | Casi siempre. Se cachea, se reutiliza y se versiona |
| Hoja interna | Un bloque style dentro del documento | Una página única, o estilos críticos que deben cargar primero |
| Estilo en línea | El atributo style en el elemento | Casi nunca: no se reutiliza y gana casi todos los conflictos |
<!-- En el head del documento -->
<link rel="stylesheet" href="estilos.css">Selectores: elegir a quién
Con estos se resuelve casi todo lo que hace falta al principio:
p { } /* por elemento: todos los párrafos */
.aviso { } /* por clase: lo que más se usa */
#menu { } /* por identificador: único, y pesa mucho */
a[target="_blank"] { } /* por atributo */
.tarjeta p { } /* descendiente: párrafos dentro de .tarjeta */
.tarjeta > p { } /* hijo directo, sin nietos */
a:hover { } /* pseudoclase: un estado */
li::marker { } /* pseudoelemento: una parte generada */
h1, h2, h3 { } /* lista: la misma regla para varios */La recomendación práctica es apoyarse en clases. Los identificadores funcionan, pero pesan tanto en el desempate que después obligan a escalar la pelea, y eso es exactamente el lío que conviene evitar.
El modelo de caja
Todo elemento es una caja con cuatro capas, de adentro hacia afuera: contenido, relleno interior, borde y margen exterior. El problema aparece con el ancho.
Por defecto, el ancho que declarás se aplica solo al contenido, y el relleno y el borde se suman por fuera. Una caja declarada de 300 píxeles con 20 de relleno a cada lado y 2 de borde ocupa 344. De ahí salen los desbordes misteriosos cuando dos columnas «de 50 %» no entran.
/* La primera regla de casi cualquier hoja de estilos moderna */
*, *::before, *::after {
box-sizing: border-box; /* ahora 300px SON 300px */
}Con eso, el ancho declarado incluye relleno y borde, que es como casi todo el mundo espera que funcione. Es una línea que ahorra una categoría entera de cálculos mentales.
Cascada y especificidad
La primera palabra del nombre —cascading— describe el mecanismo que decide qué regla gana cuando varias afectan al mismo elemento. El desempate mira, en este orden:
- Origen e importanciaDe dónde viene la regla y si lleva la marca de importancia, que salta la cola.
- EspecificidadCuán preciso es el selector. Acá se resuelve la mayoría de los casos.
- Orden de apariciónSi todo lo anterior empata, gana la última que se declaró.
La especificidad se cuenta en tres columnas separadas: identificadores, después clases y atributos y pseudoclases, y por último elementos y pseudoelementos. Se comparan en ese orden y no se acumulan entre columnas: un solo identificador vence a cualquier cantidad de clases.
p { color: gris; } /* 0-0-1 */
.aviso { color: naranja; } /* 0-1-0 ← gana a la de arriba */
.caja .aviso { color: rojo; } /* 0-2-0 ← gana a la anterior */
#alerta { color: negro; } /* 1-0-0 ← gana a TODAS */
/* Y esto rompe el sistema. Si aparece, casi siempre es
un síntoma de que la especificidad se fue de control. */
.aviso { color: verde !important; }«No me toma el estilo»
Casi nunca significa que el archivo no cargó. Significa que otra regla más específica ya ganó. Las herramientas de desarrollo del navegador muestran, para el elemento seleccionado, todas las reglas que lo afectan y cuáles quedaron tachadas. Mirar eso antes de agregar !important resuelve el problema en lugar de esconderlo.
Unidades: cuál usar
La elección de unidad no es un detalle estético: define si el sitio respeta la configuración de quien lo lee.
| Unidad | Relativa a | Para qué |
|---|---|---|
rem | El tamaño de letra base del navegador | Texto y espacios. Respeta lo que la persona configuró |
em | El tamaño de letra del elemento padre | Espacios que deben escalar con su propio texto |
% | El tamaño del contenedor | Anchos dentro de una disposición |
vw y vh | El ancho y alto de la ventana | Bloques a pantalla completa. Con cuidado en móviles |
px | Nada: es fijo | Bordes finos y detalles que no deberían escalar |
fr | El espacio disponible en una grilla | Repartir columnas y filas en Grid |
El caso que más importa es el texto. Alguien con baja visión que subió el tamaño de letra base de su navegador espera que los sitios lo acompañen; con tamaños fijos en píxeles, no pasa nada y la página queda ilegible para esa persona.
Flexbox o Grid
La confusión entre los dos genera horas perdidas, y la distinción es de una línea: Flexbox reparte espacio en una dimensión —una fila o una columna— y Grid trabaja en dos a la vez, filas y columnas.
/* FLEXBOX: una barra de navegación. Una sola fila. */
.barra {
display: flex;
justify-content: space-between; /* reparte en el eje principal */
align-items: center; /* centra en el eje cruzado */
gap: 1rem;
}
/* GRID: el esqueleto de la página. Filas y columnas. */
.pagina {
display: grid;
grid-template-columns: 1fr 3fr; /* lateral y contenido */
gap: 2rem;
}
/* GRID: galería que se acomoda sola, sin consultas de medios */
.galeria {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}No compiten: Grid para el esqueleto de la página, Flexbox para el interior de cada bloque. Y la última regla del ejemplo merece atención: acomoda las columnas según el ancho disponible sin escribir una sola consulta de medios. Es la forma más rentable de hacer una galería adaptable.
Que se adapte a la pantalla
El diseño adaptable se apoya en dos piezas. La primera está en el HTML —la etiqueta de vista, sin la cual nada de esto funciona— y la segunda son las consultas de medios.
/* 1. Primero, los estilos para pantalla chica: sin envolver en nada */
.pagina { display: block; }
/* 2. Después, lo que cambia cuando hay más espacio */
@media (min-width: 48rem) {
.pagina { display: grid; grid-template-columns: 1fr 3fr; }
}
/* 3. Respetar a quien pidió menos animación en su sistema */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}El orden importa: conviene escribir primero los estilos de pantalla chica y agregar los de pantalla grande después. Es más fácil agregar espacio que quitarlo, y además la mayoría del tráfico llega desde un celular.
Y los puntos de corte se eligen donde el diseño se rompe, no con los anchos de modelos de teléfono concretos: esa lista cambia todos los años.
Variables y organización
Las propiedades personalizadas —las variables de CSS— evitan tener el mismo color repetido en cuarenta lugares, y a diferencia de las de un preprocesador se pueden cambiar en tiempo de ejecución:
:root {
--color-principal: #0f8bdc;
--espacio: 1rem;
}
.boton {
background: var(--color-principal);
padding: var(--espacio) calc(var(--espacio) * 2);
}
/* Tema oscuro: se redefinen las variables, no las reglas */
@media (prefers-color-scheme: dark) {
:root { --color-principal: #65d5ff; }
}Sobre la organización del archivo, tres hábitos que evitan que la hoja se vuelva inmanejable: una convención de nombres de clase y respetarla; mantener la especificidad baja y pareja, trabajando con clases; y agrupar por componente en lugar de por tipo de propiedad, porque cuando haya que tocar la tarjeta va a estar todo junto.
Errores frecuentes
- Resolver los conflictos con
!important. Esconde el problema y obliga a escalar la próxima vez. - No poner
box-sizing: border-box. Una línea que evita desbordes toda la vida del proyecto. - Usar identificadores en la hoja de estilos. Pesan tanto que después hay que pelear contra ellos.
- Tamaños de letra en píxeles fijos. Ignoran la configuración de quien tiene baja visión.
- Elegir Flexbox para una disposición de dos dimensiones. Se puede forzar y sale mucho más complicado que con Grid.
- Puntos de corte según modelos de teléfono. Van donde el diseño se rompe.
- Empezar por escritorio. Después hay que deshacer, que es más trabajo que construir.
- Quitar el indicador de foco. Deja el sitio inutilizable para quien navega con teclado; se puede rediseñar, no eliminar.
Preguntas frecuentes
¿Qué significa que CSS sea «en cascada»?
Que sobre un mismo elemento pueden aplicarse varias reglas y hay un procedimiento para decidir cuál gana. El orden de desempate es este: primero el origen y la importancia, después la especificidad del selector, y recién al final el orden de aparición, donde gana la última. Por eso «no me toma el estilo» casi nunca significa que el CSS no cargó: significa que otra regla más específica ya ganó. Las herramientas de desarrollo del navegador muestran exactamente qué regla se aplicó y cuál quedó tachada.
¿Qué es la especificidad y cómo se calcula?
Es el peso que tiene un selector para ganar un conflicto, y se calcula contando tres cosas por separado: cuántos identificadores tiene, cuántas clases o atributos o pseudoclases, y cuántos elementos o pseudoelementos. Se comparan en ese orden, y un solo identificador vence a cualquier cantidad de clases. Los estilos escritos directamente en el atributo del elemento pesan más que todo eso, y la marca de importancia rompe el sistema entero. La consecuencia práctica: conviene resolver con clases y evitar los identificadores en las hojas de estilo.
¿Cuál es la diferencia entre Flexbox y Grid?
Flexbox reparte espacio en una dimensión: una fila o una columna. Grid trabaja en dos dimensiones al mismo tiempo, filas y columnas. La regla práctica es mirar la forma del problema. Una barra de navegación, un grupo de botones, una tarjeta con contenido alineado: eso es Flexbox. La disposición general de una página con cabecera, barra lateral, contenido y pie, o una galería con filas y columnas parejas: eso es Grid. No compiten y se usan juntos: Grid para el esqueleto de la página y Flexbox para el interior de cada bloque.
¿Por qué el ancho que puse no es el ancho real?
Por el modelo de caja. Por defecto, el ancho que se declara se aplica solo al contenido, y el relleno y el borde se suman por fuera, así que una caja de 300 píxeles con 20 de relleno y 2 de borde ocupa 344. La solución estándar es cambiar el modelo para que el ancho incluya relleno y borde, aplicándolo a todos los elementos en una sola regla al principio de la hoja. Es la primera línea que escribe casi todo el mundo, y evita una categoría entera de cálculos mentales.
¿Qué unidades conviene usar?
Para el texto, unidades relativas en lugar de píxeles fijos, porque respetan el tamaño de letra que la persona configuró en su navegador; alguien con baja visión que subió el tamaño base espera que el sitio lo acompañe. Para los espacios, unidades relativas también, así todo escala junto. Para los anchos, porcentajes o unidades de la ventana, y sobre todo límites máximos en lugar de anchos fijos. Los píxeles siguen sirviendo para bordes finos y detalles que no deberían escalar.
¿Hace falta un framework de CSS para empezar?
No, y empezar con uno suele retrasar el aprendizaje. Los frameworks resuelven decisiones que todavía no sabés que estás tomando, así que cuando algo no funciona no hay manera de diagnosticarlo. Con el modelo de caja, la cascada, Flexbox y Grid alcanza para maquetar la enorme mayoría de los sitios, y son conocimiento que no caduca cuando cambia la moda. El framework tiene sentido más adelante, cuando el problema real sea la coherencia entre muchas personas trabajando sobre el mismo diseño.
Fuentes
Documentación oficial y material de la comunidad consultados para esta guía. Fecha de consulta: 27 de julio de 2026.
Aportes de la comunidad Underc0de
- Underc0de, foro. Sección Diseño web. Maquetación, interfaces y criterios de diseño de la comunidad.
- Underc0de, foro. Sección Programación web. Consultas sobre HTML, CSS y desarrollo de sitios.
Documentación oficial
- MDN Web Docs. What is CSS?. La definición de lenguaje basado en reglas y la anatomía de un conjunto de reglas, citadas textualmente.
- MDN Web Docs. CSS. Referencia completa de propiedades y selectores en español.
- MDN Web Docs. Specificity. El cálculo de especificidad en tres columnas.
- W3C. Cascading Style Sheets. Los estándares vigentes de CSS.