Menu
Coddy logo textTech
EMPEZAR A APRENDER
flag Es iconEspañoldown icon
html iconParte del Journey de HTMLPopularRecorrido

Aprende 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.

EMPEZAR A APRENDER(es gratis)
Ver programaPlayground de Styling with CSS

281,604+ codders inscritos

119 lecciones104 retos583 preguntas de quiz

  • Apto para principiantes
  • sparkles iconAyuda de codificación con IA
  • hint iconLecciones interactivas prácticas
  • volume On iconNarración de audio en cada lección
  • quiz iconCuestionarios para poner a prueba tu conocimiento
  • certificate iconCertificado gratuito de finalización

Programa

2 secciones3 proyectos119 lecciones104 retos583 preguntas de quiz

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.

  1. Sección 1Fundamentals60 lecciones
  2. Sección 2

    Styling with CSS

    Empezar secciónEmpezarExpandirContraer    Bring your web pages to life with colors, layouts, and styles76 lecciones100 retos419 preguntas3 proyectos

    Introducción

    5 lecciones540

    Añadir CSS

    4 lecciones725

    Selectores básicos

    7 lecciones1247

    Fundamentos del texto

    8 lecciones1450

    Colores y fondos

    5 lecciones834

    Menú de cafetería

    Proyecto3 lecciones1

    Modelo de caja - Parte 1

    6 lecciones943

    Modelo de caja - Parte 2

    5 lecciones834

    Flex Box

    6 lecciones943

    Formulario de inicio de sesión

    Proyecto4 lecciones1

    Técnicas de maquetación

    7 lecciones1151

    Fundamentos de Diseño Responsivo

    6 lecciones1052

    Página web de Tonga

    Proyecto6 lecciones1

    Desafíos finales

    4 lecciones4
  3. Sección 3

    CSS Mastery

    Empezar secciónEmpezarExpandirContraer    Take you css skills to the next level!43 lecciones40 retos164 preguntas

    Dominio de selectores – Combinación

    6 lecciones539

    Pseudoclases interactivas

    5 lecciones431

    Pseudoclases estructurales

    5 lecciones432

    Proyecto de menú desplegable

    4 lecciones4

    Efectos visuales

    5 lecciones536

    Landing Page

    5 lecciones5

    Construye con CSS Grid

    4 lecciones426

    Sitio web de Flavor Fiesta

    4 lecciones4

    Desafíos finales

    5 lecciones5
  4. Sección 4Practical Frontend35 lecciones
  5. Sección 5JavaScript in Action27 lecciones
Ver el programa completo del Journey de HTML
Lo que obtienes
Todo lo que usarás para aprender a programar

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Test #1test Case Success icon
Test #2test Case Success icon
Test #3test Case Failure icon
Input
"Alex"
Output
"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

Double or Nothing

Day 5 of 7

fire Freeze icon

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

Python
7Streak
250Score
5Energy
Variables
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
CONTINUE
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
Journey
Goals
Leaderboard
Profile
4.9
StarStarStarStarStar
Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger League
Challenger LeagueTop 7 advance
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconPromotion zoneleaderboard Arrow Up icon

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables
Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

CoddyCertificate of Completion
This certifies thatJohn Doehas successfully completed
PythonPython Fundamentals
Verified
DateJan 2026
LinkedInAdd to LinkedIn

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.
Coddy programming languages illustration

Learn Styling with CSS with Coddy

COMENZAR