BananaMaster

5 Wie Verschachtelung in HTML funktioniert und was width, height und background sind ( HTML und CSS, Front End )

Falls du etwas vergessen hast — klicke, um zur Lektion zurückzukehren.

📘 Praktische Aufgaben: verschachtelte div-Blöcke

Erstelle für jede Aufgabe eigene Klassen in der Datei style.css und wende sie auf die passenden Tags an.

📌 Dateistruktur: index.html + style.css

✏️ Aufgabe 1

Reproduziere diesen Block:

• Breite: 200px
• Höhe: 200px
• Hintergrund: #3498db

✏️ Aufgabe 2

Reproduziere diese zwei Blöcke:

• Schätze die Größen mit dem Auge
• Block 1 — Hintergrund: #e74c3c
• Block 2 — Hintergrund: #2ecc71

✏️ Aufgabe 3

Reproduziere die verschachtelten Blöcke:

• Schätze die Größen mit dem Auge
• Äußerer — Hintergrund: #f39c12
• Innerer — Hintergrund: #8e44ad

✏️ Aufgabe 4

Reproduziere drei verschachtelte Blöcke:

• Schätze die Größen mit dem Auge
• Block 1 (außen) — Hintergrund: #1abc9c
• Block 2 (mittig) — Hintergrund: #e67e22
• Block 3 (innen) — Hintergrund: #c0392b

✏️ Aufgabe 5

Reproduziere den Block mit zwei Kindblöcken darin:

• Schätze die Größen mit dem Auge
• Elternelement — Hintergrund: #2c3e50
• Kind 1 — Hintergrund: #f1c40f
• Kind 2 — Hintergrund: #e91e63

✏️ Aufgabe 6

Reproduziere Blöcke unterschiedlicher Höhe in einer Reihe:

• Schätze die Größen mit dem Auge
• Block 1 — Hintergrund: #9b59b6
• Block 2 — Hintergrund: #27ae60
• Block 3 — Hintergrund: #e74c3c

✏️ Aufgabe 7

Reproduziere vier Verschachtelungsebenen:

• Schätze die Größen mit dem Auge
• Block 1 — Hintergrund: #ecf0f1
• Block 2 — Hintergrund: #bdc3c7
• Block 3 — Hintergrund: #95a5a6
• Block 4 — Hintergrund: #7f8c8d

✏️ Aufgabe 8

Reproduziere den Block mit drei Spalten darin:

• Schätze die Größen mit dem Auge — alle drei Spalten müssen innerhalb des Elternelements sein
• Elternelement — Hintergrund: #34495e
• Spalte 1 — Hintergrund: #e74c3c
• Spalte 2 — Hintergrund: #f39c12
• Spalte 3 — Hintergrund: #2ecc71

✏️ Aufgabe 9

Reproduziere den Block mit prozentualer Breite:

• Schätze die Größen mit dem Auge
• Elternelement — Hintergrund: #16a085
• Kind — Hintergrund: #d35400

✏️ Aufgabe 10 — 🔥 Bonus

Denk dir selbst etwas aus! Erstelle mindestens 3 verschachtelte Blöcke mit den Klassen .box-outer, .box-middle, .box-inner.

• Schätze die Größen mit dem Auge
• Block 1 (außen) — Hintergrund: #6c5ce7
• Block 2 (mittig) — Hintergrund: #00cec9
• Block 3 (innen) — Hintergrund: #fd79a8

📌 Wichtig:
Jede Klasse wird separat in style.css geschrieben.
Verwende nur HTML und CSS.
Übe die Eigenschaften: width, height, background.