CSS: The Definitive Guide

Acerca del libro

Eric A. Meyer es uno de los referentes históricos de CSS. Ha escrito la guía definitiva desde la primera edición (2000), actualizada en cada revisión importante del estándar. La 5ª edición (junio 2023) cubre el estado del arte tras CSS Grid, subgrid, container queries y otras novedades recientes.

El libro es el manual de referencia. No es un tutorial paso a paso, aunque puedes seguirlo linealmente. Es más bien una guía completa que vuelve a cada propiedad con detalle, ejemplos y casos edge.

Quién debería leer esta wiki

• Frontend developers que quieran una referencia completa de CSS.
• Diseñadores web que necesiten entender cómo CSS implementa sus diseños.
• Estudiantes de desarrollo web que busquen un manual estructurado.
• Tech leads que necesitan vocabulario común con su equipo.

Cómo leer esta wiki

Las notas siguen el orden del libro. Cada capítulo tiene su propia nota, con algunas fusiones cuando los temas están estrechamente relacionados.

• Capítulos 1-7 → una nota por capítulo (fundamentos).
• Capítulos 8-21 → una nota por capítulo o por bloque temático, fusionando algunos.

Cada nota arranca con un [!abstract], sigue con H2/H3, usa callouts cuando aportan (tip, warning, danger, question, example, note, info), incluye bloques de código CSS extensos, diagramas cuando simplifican la comprensión, y cierra con ## Próximos pasos enlazando a la siguiente nota.

Bloques temáticos

Fundamentos

• CSS Fundamentals: introducción. Sintaxis, cómo se aplica CSS, marcado básico.
• Selectors y pseudo-classes: cómo seleccionar elementos. Selectores básicos, combinadores, pseudo-classes, pseudo-elements, attribute selectors.
• Specificity, cascade y inheritance: por qué algunas reglas ganan y otras no. La base para evitar frustraciones.
• Values and units: los valores que toman las propiedades. Números, porcentajes, longitudes, colores, time, custom properties.

El modelo de caja

• Basic visual formatting: el box model. Display, sizing, block vs inline.
• Padding, borders, outlines, margins: las cuatro propiedades del box model.

Decoración visual

• Backgrounds y gradients: fondos, imágenes, gradients lineales, radiales, conic.
• Table layout: cómo CSS maneja las tablas.
• Fonts: tipografía. Familias, tamaños, pesos, fuentes variables.
• Text properties: alineación, decoración, transformaciones, escritura.

Layout

• Floating and positioning: float, position (relative, absolute, fixed, sticky), z-index.
• Flexbox: el modelo de layout unidimensional.
• Grid Layout: el modelo de layout bidimensional.

Contenido y presentación

• Lists y generated content: list markers, contadores, content, comillas.

Transformaciones y animaciones

• Transforms, transitions y animation: 2D, 3D, transiciones, keyframes.
• Filters, blending, clipping, masking: filtros, modos de fusión, máscaras.

Reglas y directivas

• CSS At-Rules y media queries: @media, @supports, @import, @container.

Cierre

• Glosario y referencias: glosario CSS, libros de referencia, sitios web clave.
• Epílogo y claves: cierre + ideas recurrentes + cómo seguir.

Temas transversales

Cómo usar esta wiki

La wiki está diseñada para dos lecturas:

1. Lectura secuencial: si quieres aprender CSS desde cero, sigue el orden. Las notas explican los conceptos antes de entrar en las propiedades.

2. Referencia rápida: si necesitas consultar una propiedad, ve al capítulo correspondiente. Cada nota tiene secciones claras, ejemplos aislados y tablas resumen.

Próximos pasos

• CSS Fundamentals: el primer paso. Cómo se escribe CSS, cómo se aplica al HTML, y los conceptos que vertebran todo lo demás.