CSS

Dale algo de estilo a tus páginas

CSS convierte un documento en bruto en una interfaz pulida. Selectores, el modelo de caja, Flexbox, Grid y diseño responsive, y luego animaciones y arquitectura CSS: esta ruta cubre todo lo que necesitas para dar estilo con método.

Fundamentos

Principiante - lo básico, paso a paso

• Enlazar CSS a una páginaDescubre qué es CSS, cómo conectarlo a una página HTML y cómo escribir tu primera regla.
• Selectores básicos y coloresAprende a apuntar a elementos con precisión mediante selectores de elemento, de clase y de id, y luego aplícales colores.
• El modelo de cajaComprende cómo cada elemento es una caja formada por contenido, relleno, borde y margen, y domina box-sizing.
• Texto y fuentesElige una fuente con font-family, y luego ajusta el tamaño, el grosor y el interlineado para un texto agradable de leer.
• Primeras maquetacionesDistingue los elementos de bloque de los elementos en línea y aprende las técnicas clásicas para centrar un elemento.

Progresión

Intermedio - crear proyectos reales

• Cascada, especificidad y herenciaAprende a predecir qué regla CSS gana usando la especificidad, y aprovecha la herencia para escribir menos código.
• Flexbox: ejes, justify/align, gap, flex-growDomina los dos ejes de Flexbox para alinear, centrar y distribuir tus elementos en las maquetaciones del día a día.
• Grid: columnas, filas, áreasConstruye galerías y maquetaciones de página completas con las columnas, filas y áreas con nombre de CSS Grid.
• Posicionamiento: relative, absolute, fixed, sticky, z-indexAncla insignias, encabezados y modales exactamente donde quieras con las posiciones de CSS y una escala de z-index bien gestionada.
• Diseño responsivo: media queries, unidades relativasAdapta tus interfaces a cualquier tamaño de pantalla con el enfoque mobile-first, las media queries y las unidades rem, % y vw.

Avanzado

Competente - patrones avanzados y rendimiento

• Variables CSS y las funciones calc/clampDomina las propiedades personalizadas, cómo se resuelven en tiempo de ejecución dentro de la cascada, y las funciones calc() y clamp() para interfaces fluidas.
• Transiciones y animaciones: @keyframes, transform, temporizaciónAnima en el compositor con transform y opacity, estructura tus @keyframes y respeta las preferencias de movimiento de los usuarios.
• Selectores modernos: :has, :is, :where, :nth-child avanzadoAprovecha las pseudoclases funcionales recientes para seleccionar según el contenido, agrupar selectores sin inflar la especificidad y apuntar a patrones complejos.
• Arquitectura CSS: BEM, utility-first, organización de archivosCompara BEM y el enfoque utility-first, sus compromisos reales en equipo, y estructura tus archivos con capas de cascada.
• Container queries y anidamiento en CSSHaz que tus componentes respondan a su contenedor en lugar de al viewport, y estructura tus hojas de estilos con anidamiento nativo.

Maestría

Experto - arquitectura, internos y casos límite

• El pipeline de renderizado: reflow, repaint, compositingComprende las cuatro fases del renderizado del navegador para saber exactamente qué propiedades CSS son costosas y cómo funciona will-change por dentro.
• Capas de cascada (@layer) y @scopeDomina los dos nuevos criterios de la cascada - las capas y la proximidad de ámbito - para estructurar tus estilos sin guerras de especificidad.
• Colores y funciones avanzadas: oklch, color-mix, min/maxAprovecha los espacios de color perceptuales, la sintaxis de color relativo y las funciones matemáticas tipadas para construir sistemas de diseño que el navegador calcula por ti.
• Cuadrículas expertas: subgrid, auto-fit y minmaxConstruye cuadrículas que se adaptan solas sin media queries y alinea componentes anidados sobre las pistas del padre con subgrid.
• Interacciones modernas: scroll-snap, view transitionsOrquesta el desplazamiento magnético, las transiciones de estado animadas por el navegador y el respeto riguroso a prefers-reduced-motion.