BananaMaster

4 Cómo Usar CSS en HTML: Guía Paso a Paso (HTML y CSS, Front End)

Si olvidaste algo — haz clic para ir a la lección.

📘 Tareas Prácticas de Estilo CSS

Para cada tarea crea una clase separada en style.css y aplícala a la etiqueta HTML correcta.

📌 Estructura de archivos: index.html + style.css

✏️ Tarea 1

Recrea el estilo de este texto:

Hello World

• Color de texto: red
• Tamaño de fuente: 20px

✏️ Tarea 2

Recrea el estilo de este texto:

My Name

• Color de texto: #2bcd84
• Grosor de fuente: 700

✏️ Tarea 3

Recrea el estilo de este texto:

I love coding

• Fuente: "Courier New", Courier, monospace
• Tamaño de fuente: 24px
• Color de texto: #f0a830

✏️ Tarea 4

Recrea el estilo de este texto:

Frontend Developer

• Color de texto: blue
• Tamaño de fuente: 34px
• Grosor de fuente: 300

✏️ Tarea 5

Recrea el estilo de este texto:

CSS is cool

• Color de texto: #5bc4f5
• Fuente: Georgia, serif
• Tamaño de fuente: 20px

✏️ Tarea 6

Recrea el estilo de este texto:

JavaScript

• Color de texto: white
• Tamaño de fuente: 18px
• Grosor de fuente: 600

✏️ Tarea 7

Recrea el estilo de este texto:

Rockstar Games

• Color de texto: #ff6b6b
• Tamaño de fuente: 50px
• Fuente: "Courier New", Courier, monospace
• Grosor de fuente: 900

✏️ Tarea 8

Recrea el estilo de este texto:

Small and light

• Color de texto: #888
• Tamaño de fuente: 15px
• Grosor de fuente: 100

✏️ Tarea 9

Recrea el estilo de este texto:

GTA 6 is coming

• Color de texto: #b89ef8
• Fuente: Impact, fantasy
• Tamaño de fuente: 36px
• Grosor de fuente: 400

✏️ Tarea 10 — 🔥 Bonus

¡Crea el tuyo! Crea una clase .my-style y aplícala a cualquier etiqueta.

Text

• Elige tu propio color de texto
• Elige tu propio tamaño de fuente
• Elige tu propio grosor de fuente
• Elige tu propia fuente

📌 Importante:
Cada clase se escribe por separado en style.css.
Usa solo HTML y CSS.
JavaScript no es necesario.
Practica las propiedades: color, font-size, font-weight, font-family.