Das div-Tag zum Gruppieren von Tags in HTML

In der vorherigen Lektion haben wir das span-Tag behandelt, das es erlaubt, einen Textabschnitt irgendwie hervorzuheben. Es gibt auch ein spezielles Tag div, das es erlaubt, mehrere Tags zu gruppieren, um dann gleichzeitig etwas mit ihnen zu machen.

Nehmen wir zum Beispiel an, wir gruppieren Absätze mit den Tags div:

<div class="block1">
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div class="block2">
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

Weisen wir den Elementen der ersten Gruppe die Farbe Rot zu und den Elementen der zweiten Gruppe die Farbe Grün:

.block1 {
	color: red;
}
.block2 {
	color: green;
}

Gegeben ist der folgende Code:

<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

Färben Sie den Inhalt der ersten Div rot, den Inhalt der zweiten Div grün und den Inhalt der dritten Div blau. Weisen Sie jeder Div dazu eine eigene Klasse zu.

Gegeben ist der folgende Code:

<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

Färben Sie den Inhalt der ersten und dritten Div rot, den Inhalt der zweiten und vierten Div grün. Geben Sie dazu der ersten und dritten Div eine Klasse und der zweiten und vierten eine andere Klasse.