Fundamentos de CSS3

Curso de iniciación a CSS3 orientado a perfiles que construyen interfaces web y necesitan controlar el estilo, el layout y la responsividad de sus páginas. El alumno aprende los mecanismos fundamentales de cascada, herencia y especificidad, diseña layouts unidimensionales con Flexbox y bidimensionales con CSS Grid, implementa diseño responsive con media queries y estrategia mobile-first, y aplica tipografía y espaciado adaptables a distintos dispositivos. Al finalizar, el participante será capaz de construir componentes de interfaz responsive combinando Flexbox y Grid con criterios de mantenibilidad y escalabilidad del CSS.

Al finalizar el curso, el participante será capaz de:

• Aplicar correctamente cascada, herencia y especificidad en CSS
• Implementar layouts unidimensionales con Flexbox de forma eficiente
• Construir estructuras bidimensionales con CSS Grid
• Desarrollar interfaces responsive usando media queries y estrategia mobile-first
• Implementar tipografía y espaciado responsive para diferentes dispositivos
• Integrar componentes responsive combinando Flexbox y Grid con criterios de mantenibilidad y escalabilidad

1. Cascada, herencia y especificidad Modelo de cascada: orden de las hojas de estilo y la regla del último declarado; herencia de propiedades: qué se hereda y qué no; especificidad: cómo calcularla para selectores de tipo, clase e id; !important y por qué evitarlo; el modelo de caja (box model) y box-sizing
2. Flexbox Conceptos de contenedor y elementos flex; eje principal y eje transversal; propiedades del contenedor: display:flex, flex-direction, justify-content, align-items, flex-wrap, gap; propiedades de los items: flex-grow, flex-shrink, flex-basis, align-self, order; casos de uso: barras de navegación, tarjetas en fila, centrado vertical y horizontal
3. CSS Grid Contenedor grid y definición de columnas y filas con grid-template-columns/ rows; fr, auto y minmax(); posicionamiento explícito con grid-column/row y span; grid-template-areas para layouts semánticos; gap en grid; comparación con Flexbox: cuándo usar cada uno
4. Responsive design y media queries Estrategia mobile-first: ventajas del diseño desde la pantalla más pequeña; media queries: sintaxis, breakpoints y unidades relativas (em vs px); viewport meta tag; imágenes responsive con max-width y picture/srcset; diseños fluidos con porcentajes y clamp()
5. Tipografía y espaciado responsive Unidades relativas: em, rem, vw, vh, vmin, vmax; clamp() para tamaños de fuente fluidos; line-height y letter-spacing responsivos; escala tipográfica y consistencia visual; custom properties (CSS variables) para gestionar la paleta y el espaciado en toda la hoja de estilos
6. Componentes responsive con Flexbox y Grid combinados Cuándo combinar Flexbox y Grid: Grid para el layout de página, Flexbox para los componentes internos; card grid responsive con auto-fill y minmax; patrones de layout habituales: holy grail, sidebar con contenido principal; criterios de mantenibilidad: clases utilitarias vs. componentes; introducción a metodología BEM

• Navegador moderno con DevTools (Chrome o Firefox)
• Editor de código (VS Code recomendado con extensión Live Preview o Live Server)
• No se requiere backend ni build tools para este curso

Ninguno requerido para CSS. Se recomienda haber escrito HTML básico (crear una página con párrafos, encabezados, listas e imágenes) para poder ver los estilos aplicados en un documento real. No es necesario saber programar en JavaScript ni tener experiencia previa con frameworks CSS.