BananaMaster

5 Cómo Funciona el Anidamiento en HTML y Qué Son width, height y background (HTML y CSS, Front End)

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

📘 Tareas Prácticas: Bloques div Anidados

Para cada tarea crea clases separadas en style.css y aplícalas a las etiquetas correctas.

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

✏️ Tarea 1

Recrea este bloque:

• Ancho: 200px
• Alto: 200px
• Fondo: #3498db

✏️ Tarea 2

Recrea estos dos bloques:

• Estima los tamaños a ojo
• Bloque 1 — fondo: #e74c3c
• Bloque 2 — fondo: #2ecc71

✏️ Tarea 3

Recrea los bloques anidados:

• Estima los tamaños a ojo
• Exterior — fondo: #f39c12
• Interior — fondo: #8e44ad

✏️ Tarea 4

Recrea tres bloques anidados:

• Estima los tamaños a ojo
• Bloque 1 (exterior) — fondo: #1abc9c
• Bloque 2 (medio) — fondo: #e67e22
• Bloque 3 (interior) — fondo: #c0392b

✏️ Tarea 5

Recrea un bloque con dos bloques hijos dentro:

• Estima los tamaños a ojo
• Padre — fondo: #2c3e50
• Hijo 1 — fondo: #f1c40f
• Hijo 2 — fondo: #e91e63

✏️ Tarea 6

Recrea bloques de diferentes alturas en columna:

• Estima los tamaños a ojo
• Bloque 1 — fondo: #9b59b6
• Bloque 2 — fondo: #27ae60
• Bloque 3 — fondo: #e74c3c

✏️ Tarea 7

Recrea cuatro niveles de anidamiento:

• Estima los tamaños a ojo
• Bloque 1 — fondo: #ecf0f1
• Bloque 2 — fondo: #bdc3c7
• Bloque 3 — fondo: #95a5a6
• Bloque 4 — fondo: #7f8c8d

✏️ Tarea 8

Recrea un bloque con dos columnas dentro:

• Estima los tamaños a ojo — las tres columnas deben caber dentro del padre
• Padre — fondo: #34495e
• Columna 1 — fondo: #e74c3c
• Columna 2 — fondo: #f39c12
• Columna 3 — fondo: #2ecc71

✏️ Tarea 9

Recrea un bloque con ancho en porcentaje:

• Estima los tamaños a ojo
• Padre — fondo: #16a085
• Hijo — fondo: #d35400

✏️ Tarea 10 — 🔥 Bonus

¡Crea el tuyo! Haz al menos 3 bloques anidados con las clases .box-outer, .box-middle, .box-inner.

• Estima los tamaños a ojo
• Bloque 1 (exterior) — fondo: #6c5ce7
• Bloque 2 (medio) — fondo: #00cec9
• Bloque 3 (interior) — fondo: #fd79a8

📌 Importante:
Cada clase se escribe por separado en style.css.
Usa solo HTML y CSS.
Practica las propiedades: width, height, background.