EasyCode365EasyCode365

Fundamentos de CSS

Empieza aquí para dar estilo a tus primeras páginas web con colores, espaciado, tipografía y diseños para principiantes.

  1. ¿Qué es CSS?

    Aprende qué es CSS, cómo CSS y HTML trabajan juntos, y cómo escribir estilos con etiquetas style, estilos inline y hojas de estilo externas.

  2. Sintaxis de CSS y selectores básicos

    Aprende la estructura de una regla CSS, las declaraciones y selectores básicos como selectores de elemento, clase, ID y selectores agrupados.

  3. Selectores CSS avanzados y combinadores

    Practica selectores CSS avanzados como selectores de atributo, hijo, hermanos, descendientes y el selector universal.

  4. Especificidad, herencia y cascada

    Entiende el peso de los selectores, el orden de cascada, la herencia, reglas en conflicto y cuándo usar o evitar !important.

  5. Valores, unidades y colores en CSS

    Aprende valores, unidades y colores comunes en CSS, incluyendo px, em, rem, porcentajes, RGB, RGBA, HSL y colores hexadecimales.

  6. Dominar el modelo de caja CSS

    Entiende el área de contenido, padding, bordes, márgenes, colapso de márgenes y cómo box-sizing afecta el diseño.

  7. Conceptos básicos de tipografía web

    Aprende lo básico de la tipografía web, incluyendo font-family, tamaño de fuente, line-height, alineación y formato simple de texto.

  8. Fondos y bordes

    Aprende a dar estilo a fondos y bordes con colores, imágenes, repetición, estilos de borde y border-radius.

  9. Interactiva

    Lección interactiva: margin, padding, border

    Practica margin, padding, ancho de borde, estilo de borde y border-radius con una caja CSS en vivo.

  10. Crear enlaces y navegación

    Aprende a dar estilo a estados de enlaces y a crear barras de navegación verticales y horizontales simples.

  11. Dar estilo a listas y tablas

    Aprende a dar estilo a listas y tablas con viñetas personalizadas, espaciado, bordes, alineación, filas alternas y diseños de datos legibles.

  12. Dar estilo a formularios y botones

    Aprende a dar estilo a inputs, labels, checkboxes, botones, estados de foco y estilos predeterminados del navegador.

  13. Formato visual básico y posicionamiento

    Aprende el flujo del documento, valores display como block, inline e inline-block, además de posicionamiento relativo y absoluto básico.

  14. Elementos flotantes y clearfix

    Aprende cómo funcionan los floats, cómo el texto rodea elementos flotantes y cómo clear y clearfix solucionan problemas de layout.

  15. Introducción a CSS Flexbox

    Aprende lo básico de contenedores flex, elementos flex, dirección, alineación, wrapping, espaciado y proporciones.

  16. Interactiva

    Lección interactiva: CSS Flexbox

    Practica dirección, wrapping, alineación, espaciado y proporciones de elementos en Flexbox con playgrounds enfocados en vivo.

  17. Introducción a CSS Grid

    Aprende los conceptos básicos de CSS Grid, incluidos contenedores grid, elementos grid, filas, columnas, gaps y layouts simples de página.

  18. Interactiva

    Lección interactiva: Layout con CSS Grid

    Practica columnas, filas, gaps, spanning y auto-placement de CSS Grid con un playground en vivo.

  19. Introducción al diseño responsive y media queries

    Aprende media queries básicas, layouts mobile-first, breakpoints y cómo adaptar páginas para móvil, tablet y escritorio.