CAPÍTULO 02 / APRENDE LA WEB

Ahora, dale forma.

CSS transforma la presentación: color, espacio, tipografía y distribución. Una misma estructura puede tener muchos diseños.

DESDE EL PRIMER ARCHIVO HASTA EL RESULTADO

Da estilo a la misma página, paso a paso.

Cada paso acumula lo anterior. Lee la explicación, observa el resultado y prueba una modificación. El laboratorio adapta los archivos separados a un marco aislado.

Qué añadimos
Dónde va y en qué orden
Qué deberías ver

¿Qué pasa si…? Quitar la pieza de este paso Mover la pieza al comienzo

index.html · documento acumuladoassets/style.css · reglas acumuladas

Ancho de ejemplo

Consola y comportamiento

Ver código usado en la variante

El navegador normaliza el HTML al analizarlo. La vista previa incrusta CSS y JavaScript; en tus archivos mantendrás sus enlaces externos.

HTML

CSS

FUNDAMENTOS

Una regla, tres piezas.

Selector, propiedad y valor

.tarjeta {
  padding: 24px;
  color: #233de0;
}

.tarjeta selecciona los elementos; padding nombra la propiedad; 24px es el valor. Cada declaración termina con punto y coma.

Cómo se conecta con HTML

<link rel="stylesheet" href="assets/style.css">

El navegador construye el DOM del HTML y aplica las reglas CSS para calcular presentación y distribución. No todas las propiedades se heredan.

La cascada decide qué gana

Origen, importancia y capas de la cascada.
Especificidad del selector entre reglas relevantes.
El orden de aparición, si los criterios anteriores empatan.

Una clase pesa más que una etiqueta; un ID pesa más que una clase. :where() no aporta especificidad. La cercanía del selector en el archivo no importa si otro criterio decide primero.

El modelo de caja

Contenido, padding, borde y margin. Con box-sizing: border-box, las dimensiones declaradas incluyen padding y borde, pero no margin.

DE ESTILOS A SISTEMAS DE DISEÑO

La presentación encontró su propio lenguaje.

1994
Una propuesta de hojas de estilo

Håkon Wium Lie propuso separar los estilos del contenido; Bert Bos contribuyó a desarrollar CSS.
1996
CSS1

W3C publicó una recomendación con reglas para tipografía, colores y espaciado.
1998
CSS2

Se ampliaron posicionamiento, medios y capacidades de presentación.
Hoy
Módulos que evolucionan

CSS se desarrolla por módulos: Grid, Flexbox, consultas de contenedor y otras capacidades avanzan con sus propias especificaciones. No existe una única versión CSS3 que lo englobe todo.

LABORATORIO GUIADO

Mueve el control. Mira la caja.

Una caja, muchas posibilidades.

El padding aumenta el espacio interior. El borde mantiene un límite visible.

123456

CONSULTA CUANDO LO NECESITES

Tu referencia de CSS

Selectores, propiedades, valores y reglas principales. CSS contiene muchas más propiedades; la referencia enlazada sirve para consultar su sintaxis y compatibilidad completa.

Buscar en la referenciaCategoría

.claseSelectores

Selecciona elementos con una clase compartida.

Cuándo usarlo: Para estilos reutilizables.
Cuándo evitarlo: No uses nombres ligados al color si su propósito puede cambiar.

.tarjeta { padding: 1rem; }

Consultar documentación

#idSelectores

Selecciona un identificador único y aporta especificidad alta.

Cuándo usarlo: Para casos realmente únicos.
Cuándo evitarlo: No lo uses en todos los estilos; clases facilitan sobrescribir.

#resultado { color: navy; }

Consultar documentación

elementoSelectores

Selecciona elementos por nombre de etiqueta.

Cuándo usarlo: Para reglas base de tipografía o controles.
Cuándo evitarlo: Evita que una regla global afecte componentes sin querer.

button { font: inherit; }

Consultar documentación

[atributo]Selectores

Selecciona elementos según atributos.

Cuándo usarlo: Para estados declarados en HTML.
Cuándo evitarlo: No confundas atributos con propiedades CSS.

[aria-expanded="true"] { color: blue; }

Consultar documentación

descendiente y >Selectores

El espacio selecciona descendientes; > solo hijos directos.

Cuándo usarlo: Para acotar un componente.
Cuándo evitarlo: Cadenas muy largas crean dependencia de la estructura.

.menu > a { padding: 1rem; }

Consultar documentación

+ y ~Selectores

Seleccionan hermanos posteriores adyacentes o generales.

Cuándo usarlo: Para relacionar elementos al mismo nivel.
Cuándo evitarlo: No seleccionan elementos anteriores.

h2 + p { margin-top: 0; }

Consultar documentación

:hoverSelectores

Estado al apuntar con ratón o dispositivo equivalente.

Cuándo usarlo: Para realimentación visual complementaria.
Cuándo evitarlo: No escondas funciones esenciales detrás del hover.

a:hover { text-decoration: underline; }

Consultar documentación

:focus-visibleSelectores

Foco que necesita indicación visible.

Cuándo usarlo: Para navegación con teclado.
Cuándo evitarlo: No elimines outline sin una alternativa visible.

button:focus-visible { outline: 3px solid blue; }

Consultar documentación

:checked y :disabledSelectores

Estados de controles nativos.

Cuándo usarlo: Para reflejar selección o disponibilidad.
Cuándo evitarlo: El estilo no cambia por sí solo el estado funcional.

input:checked { accent-color: blue; }

Consultar documentación

:nth-child()Selectores

Selecciona según posición entre hermanos.

Cuándo usarlo: Para patrones visuales repetidos.
Cuándo evitarlo: No asumas un índice estable si agregas nodos.

li:nth-child(even) { background: #eee; }

Consultar documentación

:is() y :where()Selectores

Agrupan selectores; :where tiene especificidad cero.

Cuándo usarlo: Para reglas base breves.
Cuándo evitarlo: :is conserva la especificidad más alta de sus argumentos.

:where(h1, h2, h3) { line-height: 1.2; }

Consultar documentación

:has()Selectores

Selecciona un elemento que cumple una relación con descendientes.

Cuándo usarlo: Para estados de contenedores en navegadores compatibles.
Cuándo evitarlo: Revisa soporte y no sustituyas lógica compleja por selectores frágiles.

form:has(input:invalid) { border-color: red; }

Consultar documentación

::before y ::afterSelectores

Generan cajas antes o después del contenido.

Cuándo usarlo: Para decoración no esencial.
Cuándo evitarlo: No pongas información importante solo en content.

.nota::before { content: "• "; }

Consultar documentación

box-sizingCaja

Decide cómo se calculan width y height.

Cuándo usarlo: border-box facilita tamaños que incluyen padding y borde.
Cuándo evitarlo: No olvides que margin queda fuera.

* { box-sizing: border-box; }

Consultar documentación

width y heightCaja

Tamaño de la caja.

Cuándo usarlo: Cuando necesitas dimensiones explícitas.
Cuándo evitarlo: Alturas rígidas pueden cortar texto ampliado.

.foto { width: 100%; height: auto; }

Consultar documentación

min-width y max-widthCaja

Límites de anchura.

Cuándo usarlo: Para contenido legible y adaptable.
Cuándo evitarlo: Un min-width grande puede causar desbordamiento móvil.

.container { width: 100%; max-width: 70rem; }

Consultar documentación

min-height y max-heightCaja

Límites de altura.

Cuándo usarlo: Para áreas de interacción o paneles desplazables.
Cuándo evitarlo: Revisa texto grande y contenido variable.

.panel { max-height: 30rem; overflow: auto; }

Consultar documentación

marginCaja

Espacio externo; puede colapsar en flujo de bloques.

Cuándo usarlo: Para separar componentes.
Cuándo evitarlo: No añade fondo ni aumenta el área interna clicable.

p { margin: 0 0 1rem; }

Consultar documentación

paddingCaja

Espacio entre contenido y borde.

Cuándo usarlo: Para aire interior y controles cómodos.
Cuándo evitarlo: No confundir con distancia entre elementos.

.tarjeta { padding: 1.5rem; }

Consultar documentación

borderCaja

Borde de la caja.

Cuándo usarlo: Para límites visibles.
Cuándo evitarlo: Cambiar grosor puede cambiar dimensiones si no usas border-box.

.tarjeta { border: 1px solid #ddd; }

Consultar documentación

border-radiusCaja

Redondea esquinas.

Cuándo usarlo: Para dar continuidad a una interfaz.
Cuándo evitarlo: No arregla una imagen que desborda sin overflow apropiado.

.tarjeta { border-radius: 16px; }

Consultar documentación

overflowCaja

Controla contenido que supera la caja.

Cuándo usarlo: auto crea desplazamiento cuando es necesario.
Cuándo evitarlo: hidden puede ocultar contenido o indicadores de foco.

.codigo { overflow: auto; }

Consultar documentación

aspect-ratioCaja

Relación entre anchura y altura.

Cuándo usarlo: Para reservar espacio de videos e imágenes.
Cuándo evitarlo: Puede dejar de controlar si ambas dimensiones son rígidas.

.video { aspect-ratio: 16 / 9; }

Consultar documentación

displayDistribución

Selecciona el modelo de presentación: block, flex, grid o none.

Cuándo usarlo: Para definir cómo se distribuyen los hijos.
Cuándo evitarlo: display:none retira también el contenido del árbol accesible.

.lista { display: grid; }

Consultar documentación

grid-template-columnsDistribución

Define columnas de Grid.

Cuándo usarlo: Para distribuciones de dos dimensiones.
Cuándo evitarlo: Columnas rígidas pueden romper pantallas pequeñas.

.grid { display: grid; grid-template-columns: repeat(3, 1fr); }

Consultar documentación

repeat(), minmax() y auto-fitDistribución

Repetición, límites de pista y ajuste automático.

Cuándo usarlo: Para cuadrículas adaptables.
Cuándo evitarlo: Un mínimo mayor que el viewport desborda.

.grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

Consultar documentación

grid-column y grid-rowDistribución

Ubica elementos en pistas.

Cuándo usarlo: Para hacer que una tarjeta abarque columnas.
Cuándo evitarlo: No cambies el orden visual a costa del orden de lectura.

.destacada { grid-column: 1 / -1; }

Consultar documentación

gapDistribución

Espaciado entre pistas de Grid o elementos Flex.

Cuándo usarlo: Para separación uniforme.
Cuándo evitarlo: No crea espacio fuera del contenedor.

.grid { gap: 20px; }

Consultar documentación

flex-directionDistribución

Eje principal de un contenedor Flex.

Cuándo usarlo: Para filas o columnas de controles.
Cuándo evitarlo: column cambia el significado visual de justify-content y align-items.

.acciones { display: flex; flex-direction: row; }

Consultar documentación

flex-wrapDistribución

Permite varias líneas Flex.

Cuándo usarlo: Para controles que deben caber en móvil.
Cuándo evitarlo: nowrap puede comprimir o desbordar los hijos.

.acciones { flex-wrap: wrap; }

Consultar documentación

flexDistribución

Forma corta de crecimiento, reducción y base.

Cuándo usarlo: Para repartir espacio flexible.
Cuándo evitarlo: No implica que todo texto largo pueda encogerse; revisa min-width.

.campo { flex: 1 1 200px; }

Consultar documentación

justify-contentDistribución

Distribuye elementos en el eje principal de Flex y la cuadrícula en Grid.

Cuándo usarlo: Para centrar o repartir espacio.
Cuándo evitarlo: No siempre actúa si no hay espacio libre.

.acciones { justify-content: space-between; }

Consultar documentación

align-itemsDistribución

Alineación de los hijos en el eje transversal de Flex o dentro de sus áreas Grid.

Cuándo usarlo: Para centrar elementos o evitar estiramiento.
Cuándo evitarlo: stretch puede crear tarjetas altas con zonas vacías.

.grid { align-items: start; }

Consultar documentación

positionDistribución

Selecciona posicionamiento static, relative, absolute, fixed o sticky.

Cuándo usarlo: Para casos que necesitan anclaje o superposición.
Cuándo evitarlo: No uses absolute para maquetar una página completa.

.menu { position: sticky; top: 0; }

Consultar documentación

top, right, bottom y leftDistribución

Desplazamientos de elementos posicionados.

Cuándo usarlo: Para fijar bordes de una caja.
Cuándo evitarlo: No afectan normalmente position:static.

.aviso { position: fixed; right: 1rem; bottom: 1rem; }

Consultar documentación

z-indexDistribución

Orden de apilamiento dentro de contextos.

Cuándo usarlo: Para overlays y cabeceras.
Cuándo evitarlo: Un valor enorme no escapa al contexto de apilamiento padre.

.cabecera { position: sticky; z-index: 10; }

Consultar documentación

floatDistribución

Permite que texto fluya alrededor de una caja.

Cuándo usarlo: Para envolver imágenes en texto.
Cuándo evitarlo: Para layout general usa Grid o Flex.

img { float: left; margin-right: 1rem; }

Consultar documentación

font-familyTipografía y color

Familia de fuentes y alternativas.

Cuándo usarlo: Para un sistema tipográfico consistente.
Cuándo evitarlo: No dependas de que una fuente remota esté disponible.

body { font-family: system-ui, sans-serif; }

Consultar documentación

font-sizeTipografía y color

Tamaño de texto.

Cuándo usarlo: Con rem o escalas adaptables para lectura.
Cuándo evitarlo: Evita tamaños demasiado pequeños o impedir zoom.

body { font-size: 1rem; }

Consultar documentación

font-weightTipografía y color

Peso de la fuente.

Cuándo usarlo: Para jerarquía visual.
Cuándo evitarlo: No todas las fuentes contienen todos los pesos.

h1 { font-weight: 700; }

Consultar documentación

line-heightTipografía y color

Altura de línea.

Cuándo usarlo: Para separación legible; sin unidad suele heredar mejor.
Cuándo evitarlo: Una altura muy pequeña solapa caracteres.

p { line-height: 1.7; }

Consultar documentación

letter-spacingTipografía y color

Espaciado entre letras.

Cuándo usarlo: Con moderación en etiquetas cortas.
Cuándo evitarlo: Evita valores excesivos en párrafos.

.etiqueta { letter-spacing: .08em; }

Consultar documentación

text-alignTipografía y color

Alineación del contenido en línea.

Cuándo usarlo: Para texto y elementos en línea.
Cuándo evitarlo: No centra cajas de bloque por sí solo.

h1 { text-align: center; }

Consultar documentación

text-decorationTipografía y color

Líneas decorativas del texto.

Cuándo usarlo: Para enlaces reconocibles.
Cuándo evitarlo: No retires el subrayado sin otro indicio claro.

a { text-decoration: underline; }

Consultar documentación

colorTipografía y color

Color del texto y valor de currentColor.

Cuándo usarlo: Para contraste y jerarquía.
Cuándo evitarlo: No comuniques estados solo con color.

p { color: #253247; }

Consultar documentación

backgroundTipografía y color

Fondos, imágenes y gradientes.

Cuándo usarlo: Para diferenciar superficies.
Cuándo evitarlo: Las imágenes de fondo no tienen alt; no pongas allí contenido esencial.

.hero { background: linear-gradient(120deg, #eef2ff, white); }

Consultar documentación

opacityTipografía y color

Transparencia de la caja completa y sus hijos.

Cuándo usarlo: Para efectos visuales complementarios.
Cuándo evitarlo: opacity:0 conserva interacción y espacio.

.suave { opacity: .7; }

Consultar documentación

box-shadowTipografía y color

Sombra de una caja.

Cuándo usarlo: Para elevación visual moderada.
Cuándo evitarlo: No sustituye límites y contraste suficientes.

.tarjeta { box-shadow: 0 8px 24px #0001; }

Consultar documentación

object-fitTipografía y color

Ajuste de imágenes o videos dentro de una caja.

Cuándo usarlo: contain conserva todo; cover puede recortar.
Cuándo evitarlo: No cambia el archivo ni su resolución.

img { width: 200px; height: 150px; object-fit: cover; }

Consultar documentación

transformMovimiento

Transformación visual: trasladar, rotar o escalar.

Cuándo usarlo: Para animación sin cambiar el flujo normal.
Cuándo evitarlo: El espacio original permanece reservado.

.tarjeta:hover { transform: translateY(-4px); }

Consultar documentación

transitionMovimiento

Interpola cambios entre valores.

Cuándo usarlo: Para cambios breves y comprensibles.
Cuándo evitarlo: No uses transition:all indiscriminadamente.

button { transition: background-color .2s; }

Consultar documentación

animation y @keyframesMovimiento

Animación con etapas nombradas.

Cuándo usarlo: Para comunicar actividad o cambios.
Cuándo evitarlo: Respeta prefers-reduced-motion y evita distracciones.

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.aviso { animation: aparecer .3s; }

Consultar documentación

@mediaAdaptación y herramientas

Aplica reglas bajo condiciones.

Cuándo usarlo: Para viewport, impresión y preferencias de movimiento.
Cuándo evitarlo: No diseñes únicamente para modelos de dispositivos concretos.

@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }

Consultar documentación

@containerAdaptación y herramientas

Consulta dimensiones de un contenedor habilitado.

Cuándo usarlo: Para componentes adaptables a su espacio.
Cuándo evitarlo: Declara container-type y comprueba compatibilidad.

.zona { container-type: inline-size; }
@container (max-width: 400px) { .tarjeta { padding: 1rem; } }

Consultar documentación

@supportsAdaptación y herramientas

Comprueba si el navegador reconoce una característica.

Cuándo usarlo: Para mejoras progresivas.
Cuándo evitarlo: No prueba todos los comportamientos posibles.

@supports (display: grid) { .lista { display: grid; } }

Consultar documentación

@layerAdaptación y herramientas

Ordena capas de la cascada.

Cuándo usarlo: Para separar base, componentes y utilidades.
Cuándo evitarlo: Las reglas normales sin capa tienen prioridad sobre reglas normales en capas.

@layer base, components;
@layer base { body { margin: 0; } }

Consultar documentación

Variables y var()Adaptación y herramientas

Propiedades personalizadas que participan en la cascada.

Cuándo usarlo: Para colores, espacios y temas compartidos.
Cuándo evitarlo: Incluye fallback cuando la variable puede faltar.

:root { --color: blue; }
a { color: var(--color, navy); }

Consultar documentación

rem, em, %, vw y vhAdaptación y herramientas

Unidades relativas a raíz, fuente, referencia o viewport.

Cuándo usarlo: Para tamaños que responden al contexto.
Cuándo evitarlo: Un porcentaje de altura necesita una referencia definida en muchos casos.

h1 { font-size: 2rem; }
main { width: 90%; }

Consultar documentación

calc() y clamp()Adaptación y herramientas

Cálculo de valores y límites adaptables.

Cuándo usarlo: Para combinar unidades y escalas fluidas.
Cuándo evitarlo: No sustituyen todas las decisiones de layout.

h1 { font-size: clamp(2rem, 5vw, 4rem); }

Consultar documentación

!importantAdaptación y herramientas

Cambia la prioridad de una declaración en la cascada.

Cuándo usarlo: Para excepciones deliberadas y justificadas.
Cuándo evitarlo: No lo uses como solución rutinaria a selectores mal organizados.

[hidden] { display: none !important; }

Consultar documentación

CAMBIA · EJECUTA · OBSERVA

Tu laboratorio de CSS

Edita el ejemplo y pulsa Ejecutar. El resultado y el código permanecen separados.

Código editable

HTMLCSS

Resultado en el navegador

Vista previa

Consola del ejemplo

Solo ejecuta código que entiendas. La vista previa está aislada del sitio. Los cambios del editor no se guardan al cerrar la página.

Consola y comportamiento

HTML

CSS

Selector, propiedad y valor

Cómo se conecta con HTML

La cascada decide qué gana

El modelo de caja

Una propuesta de hojas de estilo

CSS1

CSS2

Módulos que evolucionan

Una caja, muchas posibilidades.

Código editable

Consola del ejemplo