div-Boxen

HTML-Struktur mit div-Boxen
Verschachtelung
Verschachtelte Elemente im Browser
Im Laufe dieser Aufgabe werden Sie die HTML-Seite aus der Abbildung erstellen. Gehen Sie dabei schrittweite vor:
  1. Erstellen Sie eine CSS-Datei mit den folgenden Inhalten: 
    div {
	padding: 20px;
	margin: 10px;
}

p {
	padding: 10px;
}
													
.ebene1 {
	background-color: tomato;
}
													
.ebene2 {
	background-color: lightskyblue;
}
													
.ebene1 div div {
	background-color: greenyellow;
}
													
p {
	background-color: azure;
	color: dodgerblue;
}
    Durch diese Angaben werden Sie die Boxen, welche Sie in HTML hinzufügen, besser erkennen können.
  2. Erstellen Sie eine neue HTML-Datei mit einem Grundgerüst und referenzieren Sie darin die obige CSS-Datei.
  3. Entwickeln Sie nun die Webseite schrittweise von "außen nach innen". Überprüfen Sie nach jedem Schritt das Aussehen der Seite im Webbrowser.
    1. Fangen Sie mit der roten Box an: Erstellen Sie ein div-Element mit der Klasse ebene1.
    2. Wenn Sie die rote Box im Browser gesehen haben, hinterlegen Sie ihre beiden Kinder-Elemente (blaue Boxen) in der HTML-Datei: Erstellen Sie innerhalb des div-Elements aus dem letzten Schritt zwei weitere div-Elemente - jeweils mit der Klasse ebene2.
    3. Wenn die beiden blauen Boxen im Browser sichtbar sind, können Sie nun mit ihren Inhalten fortfahren:
      1. Die erste blaue Box hat nur einen Textabsatz als Kind. Hinterlegen Sie dafür ein p-Element in der ersten blauen Box.
      2. Die zweite blaue Box hat noch zwei weitere div-Boxen als Kinder. Hinterlegen Sie dafür zwei div-Elemente in der zweiten blauen Box.
    4. Die beiden grünen Boxen sind Kinder der zweiten blauen Box. Erstellen Sie innerhalb der zweiten blauen Box zwei weitere div-Elemente.
    5. Die beiden grünen Boxen haben jeweils einen Textabsatz als Kind. Hinterlegen Sie dafür jeweils ein p-Element in jeder grünen Box.
    6. Nun sollten Sie die komplette Boxenstruktur im Browser sehen. Dann können Sie die Inhalte der Seite einfügen: Hinterlegen Sie in jedem p-Element einen beliebigen Text.