Tag div per raggruppare i tag in HTML

Nella lezione precedente abbiamo analizzato il tag span, che permette di evidenziare in qualche modo un pezzetto di testo. Esiste anche un tag speciale div, che permette di raggruppare più tag, per poi fare qualcosa con loro simultaneamente.

Supponiamo ad esempio che con i tag div raggruppiamo i paragrafi:

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

Assegniamo agli elementi del primo gruppo il colore rosso, e agli elementi del secondo gruppo - il verde:

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

È dato il seguente codice:

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

Colorate il contenuto del primo div in rosso, il contenuto del secondo div - in verde, e il contenuto del terzo div - in azzurro. Assegnate a ogni div una propria classe.

È dato il seguente codice:

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

Colorate il contenuto del primo e del terzo div in rosso, il contenuto del secondo div e del quarto - in verde. Per fare ciò, assegnate al primo e al terzo div una classe, e al secondo e al quarto - un'altra classe.