Parte del Journey de HTMLPopularRecorridoAprende CSS
Un curso de CSS gratuito e interactivo. En cada lección das estilo a HTML real - selectores, el modelo de caja, colores, fuentes, flexbox, grid, diseño responsivo - con una vista previa en vivo mientras escribes y un certificado gratuito al terminar. Forma parte del recorrido más amplio de HTML, así que el contexto de marcado que CSS necesita lo tienes ahí mismo.
269,396+ codders inscritos
- Apto para principiantes
Ayuda de codificación con IA
Lecciones interactivas prácticas
Narración de audio en cada lección
Cuestionarios para poner a prueba tu conocimiento
Certificado gratuito de finalización
Programa
Esta sección forma parte del Journey de HTML. El programa completo tiene más secciones - haz clic en cualquier vista previa de abajo para verla en la página del Journey.
- Sección 1Fundamentals60 lecciones
Sección 2
Styling with CSS
Empezar secciónEmpezarExpandirContraerBring your web pages to life with colors, layouts, and stylesIntroducción
5 lecciones540- 01¿Qué es CSS?RetoQuiz
- 02Sintaxis de CSSRetoQuiz
- 03Comentarios en CSSQuiz
- 04La etiqueta HeadRetoQuiz
- 05La etiqueta TitleRetoMaestríaQuiz
Añadir CSS
4 lecciones725- 01CSS en líneaRetoMaestríaQuiz
- 02CSS internoRetoMaestríaQuiz
- 03CSS externoRetoMaestríaQuiz
- 04Desafío de estilos básicosReto
Selectores básicos
7 lecciones1247- 01Introducción a los selectoresRetoQuiz
- 02Selector de tipoRetoMaestríaQuiz
- 03Selector de claseRetoMaestríaQuiz
- 04Selector de IDRetoMaestríaQuiz
- 05Selectores de grupoRetoMaestríaQuiz
- 06Selector universalRetoMaestríaQuiz
- 07Desafío de selecciónReto
Fundamentos del texto
8 lecciones1450- 01Color de textoRetoMaestríaQuiz
- 02Familia de fuentesRetoMaestríaQuiz
- 03Tamaño de fuenteRetoMaestríaQuiz
- 04Grosor de fuenteRetoMaestríaQuiz
- 05Alineación de textoRetoMaestríaQuiz
- 06Decoración de textoRetoMaestríaQuiz
- 07Desafío de repaso #1Reto
- 08Desafío de repaso #2Reto
Colores y fondos
5 lecciones834- 01Color de fondoRetoMaestríaQuiz
- 02Colores HEXRetoMaestríaQuiz
- 03Colores RGBRetoMaestríaQuiz
- 04Transparencia con RGBARetoQuiz
- 05Desafío de repaso #1Reto
Menú de cafetería
Proyecto3 lecciones1- 01Fundamentos de tipografíaReto
- 02Estilo de textoProyecto
- 03Color y fondosProyecto
Modelo de caja - Parte 1
6 lecciones943- 01¿Qué es el modelo de caja?Quiz
- 02PaddingRetoMaestríaQuiz
- 03MárgenesRetoMaestríaQuiz
- 04BordesRetoMaestríaQuiz
- 05Ancho y altoRetoMaestríaQuiz
- 06Desafío de repasoReto
Modelo de caja - Parte 2
5 lecciones834- 01Box SizingRetoQuiz
- 02Border RadiusRetoMaestríaQuiz
- 03OverflowRetoMaestríaQuiz
- 04Box ShadowRetoMaestríaQuiz
- 05Desafío de repasoReto
Flex Box
6 lecciones943- 01¿Qué es Flex Box?RetoQuiz
- 02Flex DirectionRetoMaestríaQuiz
- 03Justify ContentRetoMaestríaQuiz
- 04Align ItemsRetoMaestríaQuiz
- 05El centrado perfectoRetoQuiz
- 06Desafío de Flex BoxReto
Formulario de inicio de sesión
Proyecto4 lecciones1- 01CuerpoReto
- 02Contenedor del formularioProyecto
- 03InputProyecto
- 04BotónProyecto
Técnicas de maquetación
7 lecciones1152- 01Elementos de bloque vs. en líneaRetoQuiz
- 02Conceptos básicos de posicionamientoRetoMaestríaQuiz
- 03Posicionamiento relativoRetoMaestríaQuiz
- 04Posicionamiento absolutoRetoMaestríaQuiz
- 05Posicionamiento fijoRetoMaestríaQuiz
- 06Conceptos básicos de Z-IndexRetoQuiz
- 07Desafío de repasoReto
Fundamentos de Diseño Responsivo
6 lecciones1052- 01¿Qué es el Diseño Responsivo?RetoQuiz
- 02Etiqueta Meta ViewportRetoQuiz
- 03Diseños FluidosRetoMaestríaQuiz
- 04Unidades de ViewportRetoMaestríaQuiz
- 05Fundamentos de Media QueriesRetoMaestríaQuiz
- 06Imágenes FlexiblesRetoMaestríaQuiz
Página web de Tonga
Proyecto6 lecciones1- 01Menú de navegaciónReto
- 02Encabezado de bienvenidaProyecto
- 03Sección "Acerca de"Proyecto
- 04Sección de contactoProyecto
- 05Etiqueta ViewportProyecto
- 06Media QueryProyecto
Desafíos finales
4 lecciones4- 01Organizar elementosReto
- 02Lista de películasReto
- 03Tarjeta de invitación de bodaReto
- 04Notificación flotanteReto
Sección 3
CSS Mastery
Empezar secciónEmpezarExpandirContraerTake you css skills to the next level!Dominio de selectores – Combinación
6 lecciones539- 01IntroducciónQuiz
- 02Selector de descendienteRetoQuiz
- 03Selector de hijoRetoQuiz
- 04Selector de hermano adyacenteRetoQuiz
- 05Selector de hermano generalRetoQuiz
- 06Desafío de repasoReto
Pseudoclases interactivas
5 lecciones431- 01PseudoclasesQuiz
- 02Efectos de hoverRetoQuiz
- 03Efectos de focusRetoQuiz
- 04Estilos de estado activoRetoQuiz
- 05Desafío de repasoReto
Pseudoclases estructurales
5 lecciones432- 01Pseudoclases estructuralesQuiz
- 02Seleccionando el primer hijoRetoQuiz
- 03Seleccionando el último hijoRetoQuiz
- 04El poder de los patrones: Usando nth-childRetoQuiz
- 05Desafío de repasoReto
Proyecto de menú desplegable
4 lecciones4- 01Añadir el submenúReto
- 02Mostrar el submenúReto
- 03Más estilosReto
- 04Input y botónReto
Efectos visuales
5 lecciones536- 01DegradadosRetoQuiz
- 02Filtros CSSRetoQuiz
- 03TransformacionesRetoQuiz
- 04Transiciones y efectos hoverRetoQuiz
- 05Desafío de repasoReto
Landing Page
5 lecciones5- 01Dar estilo a la sección del encabezadoReto
- 02Dar estilo al botónReto
- 03Diseño de la secciónReto
- 04Diseño de tarjetasReto
- 05Añadir los toques finalesReto
Construye con CSS Grid
4 lecciones426- 01Conceptos básicos de GridRetoQuiz
- 02Posicionamiento de elementos en Grid-rowRetoQuiz
- 03Áreas con nombreRetoQuiz
- 04Desafío de repasoReto
Sitio web de Flavor Fiesta
4 lecciones4- 01Configuración del gridReto
- 02EncabezadoReto
- 03La parte principalReto
- 04Pie de páginaReto
Desafíos finales
5 lecciones5- 01Resaltar menú activoReto
- 02Filas de tabla tipo cebraReto
- 03Efecto hover en botonesReto
- 04Diseño de tarjetas en GridReto
- 05Imagen Hero desenfocadaReto
- Sección 4Practical Frontend35 lecciones
- Sección 5JavaScript in Action27 lecciones
Por qué aprender CSS con Coddy
- Escribe CSS en tu navegador y mira cómo la página se reestiliza en vivo. Sin paso de compilación, sin configurar un editor. Cada cambio en un selector o una propiedad aparece al instante, así que ves lo que hace realmente cada regla.
- CSS esencial: selectores y especificidad, el modelo de caja, posicionamiento, flexbox, CSS grid, transiciones, media queries y diseño responsivo. El CSS que todo desarrollador front-end necesita en su día a día.
- Las pistas de IA te ayudan a depurar lo que siempre hace tropezar a la gente - sorpresas de especificidad, desbordamientos de diseño, comportamientos raros de flexbox - sin revelarte la solución, para que el CSS se vuelva intuitivo en lugar de mágico.
- Certificado gratuito de CSS al terminar la sección. Combina de forma natural con los cursos de HTML y JavaScript para una base completa de front-end.
Preguntas frecuentes sobre aprender CSS
¿Qué es CSS?
CSS (Cascading Style Sheets) es el lenguaje que controla cómo se ven las páginas HTML - colores, fuentes, espaciado, diseño, animaciones y comportamiento responsivo en distintos tamaños de pantalla. HTML define qué hay en la página; CSS define cómo se presenta.
¿Es difícil aprender CSS?
El CSS básico - selectores, colores, fuentes, el modelo de caja - se aprende en unas pocas horas. Las partes más difíciles vienen después: las reglas de especificidad, los diseños con flexbox y grid, y hacer que todo se vea bien en cualquier tamaño de pantalla. El curso los introduce en pasos pequeños con una vista previa en vivo, así que ves exactamente lo que hace cada regla.
¿Debería aprender HTML antes que CSS?
Sí. HTML define la estructura de una página; CSS le da estilo. Sin HTML no tienes nada a lo que dar estilo. Esta sección de CSS forma parte del recorrido de HTML por esa razón: la sección de fundamentos de HTML va primero y luego dedicas la mayor parte del recorrido a darle estilo.
¿Cuál es la diferencia entre CSS, Flexbox y Grid?
Flexbox y Grid son módulos de diseño dentro de CSS - no son tecnologías separadas, son características de CSS. Flexbox es mejor para diseños unidimensionales (una fila de tarjetas, una barra de navegación). Grid es mejor para diseños bidimensionales (una página entera, un diseño de tarjetas complejo). La mayoría de los sitios reales usan ambos, y el curso cubre cuándo recurrir a cada uno.
¿Puedo aprender CSS en línea gratis?
Sí. La sección interactiva de CSS es gratuita: lecciones completas, ejercicios de programación, una vista previa en vivo y un certificado. Todo se ejecuta en el navegador, así que no necesitas instalar ningún editor ni herramienta para empezar.
¿Obtengo un certificado al terminar el curso de CSS?
Sí. Al terminar la sección de CSS obtienes un certificado de finalización gratuito. Una prueba verificable que puedes añadir a tu currículum o compartir en LinkedIn junto a los certificados de HTML y JavaScript como parte de un portafolio de front-end.
