BananaMaster

5 Comment fonctionne l'imbrication en HTML, et ce que sont width, height et background ( HTML et CSS, Front End )

Si tu as oublié quelque chose — clique pour retourner à la leçon.

📘 Exercices pratiques : blocs div imbriqués

Pour chaque tâche, crée des classes séparées dans le fichier style.css et applique-les aux balises correspondantes.

📌 Structure des fichiers : index.html + style.css

✏️ Tâche 1

Reproduis ce bloc :

• Largeur : 200px
• Hauteur : 200px
• Fond : #3498db

✏️ Tâche 2

Reproduis ces deux blocs :

• Estime les tailles à l'œil
• Bloc 1 — fond : #e74c3c
• Bloc 2 — fond : #2ecc71

✏️ Tâche 3

Reproduis les blocs imbriqués :

• Estime les tailles à l'œil
• Externe — fond : #f39c12
• Interne — fond : #8e44ad

✏️ Tâche 4

Reproduis trois blocs imbriqués :

• Estime les tailles à l'œil
• Bloc 1 (externe) — fond : #1abc9c
• Bloc 2 (moyen) — fond : #e67e22
• Bloc 3 (interne) — fond : #c0392b

✏️ Tâche 5

Reproduis le bloc avec deux blocs enfants à l'intérieur :

• Estime les tailles à l'œil
• Parent — fond : #2c3e50
• Enfant 1 — fond : #f1c40f
• Enfant 2 — fond : #e91e63

✏️ Tâche 6

Reproduis des blocs de hauteurs différentes en ligne :

• Estime les tailles à l'œil
• Bloc 1 — fond : #9b59b6
• Bloc 2 — fond : #27ae60
• Bloc 3 — fond : #e74c3c

✏️ Tâche 7

Reproduis quatre niveaux d'imbrication :

• Estime les tailles à l'œil
• Bloc 1 — fond : #ecf0f1
• Bloc 2 — fond : #bdc3c7
• Bloc 3 — fond : #95a5a6
• Bloc 4 — fond : #7f8c8d

✏️ Tâche 8

Reproduis le bloc avec trois colonnes à l'intérieur :

• Estime les tailles à l'œil — les trois colonnes doivent être à l'intérieur du parent
• Parent — fond : #34495e
• Colonne 1 — fond : #e74c3c
• Colonne 2 — fond : #f39c12
• Colonne 3 — fond : #2ecc71

✏️ Tâche 9

Reproduis le bloc avec une largeur en pourcentage :

• Estime les tailles à l'œil
• Parent — fond : #16a085
• Enfant — fond : #d35400

✏️ Tâche 10 — 🔥 Bonus

Invente toi-même ! Crée au moins 3 blocs imbriqués avec les classes .box-outer, .box-middle, .box-inner.

• Estime les tailles à l'œil
• Bloc 1 (externe) — fond : #6c5ce7
• Bloc 2 (moyen) — fond : #00cec9
• Bloc 3 (interne) — fond : #fd79a8

📌 Important :
Chaque classe est écrite séparément dans style.css.
Utilisez uniquement HTML et CSS.
Entraîne-toi sur les propriétés : width, height, background.