La balise div pour regrouper des balises en HTML

Dans la leçon précédente, nous avons analysé la balise span, qui permet de mettre en évidence un morceau de texte. Il existe également une balise spéciale div, qui permet de regrouper plusieurs balises afin de leur appliquer ensuite quelque chose simultanément.

Prenons par exemple, avec les balises div, groupons des paragraphes :

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

Appliquons aux éléments du premier groupe la couleur rouge, et aux éléments du deuxième groupe - la couleur verte :

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

Soit le code suivant :

<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>

Colorez le contenu du premier div en rouge, le contenu du deuxième div - en vert, et le contenu du troisième div - en bleu clair. Attribuez pour cela à chaque div sa propre classe.

Soit le code suivant :

<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>

Colorez le contenu du premier et du troisième div en rouge, le contenu du deuxième div et du quatrième - en vert. Pour cela, donnez au premier et au troisième div une même classe, et au deuxième et au quatrième - une autre classe.