Tag div para agrupar tags em HTML

Na lição anterior, analisamos a tag span, que permite destacar de alguma forma um pedaço de texto. Também existe uma tag especial div, que permite agrupar várias tags para depois fazer algo com todas elas simultaneamente.

Suponha, por exemplo, que usando as tags div vamos agrupar parágrafos:

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

Vamos definir a cor vermelha para os elementos do primeiro grupo e a cor verde para os elementos do segundo grupo:

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

Dado o seguinte código:

<div>
	<h2>Título</h2>
	<p>
		texto
	</p>
	<p>
		texto
	</p>
</div>
<div>
	<h2>Título</h2>
	<p>
		texto
	</p>
	<p>
		texto
	</p>
	<p>
		texto
	</p>
</div>
<div>
	<h2>Título</h2>
	<p>
		texto
	</p>
	<p>
		texto
	</p>
	<p>
		texto
	</p>
	<p>
		texto
	</p>
</div>

Pinte o conteúdo da primeira div em vermelho, o conteúdo da segunda div - em verde, e o conteúdo da terceira div - em azul. Atribua a cada div sua própria classe para isso.

Dado o seguinte código:

<div>
	<h2>Título</h2>
	<p>
		texto
	</p>
	<p>
		texto
	</p>
</div>
<div>
	<h2>Título</h2>
	<p>
		texto
	</p>
	<p>
		texto
	</p>
</div>
<div>
	<h2>Título</h2>
	<p>
		texto
	</p>
	<p>
		texto
	</p>
</div>
<div>
	<h2>Título</h2>
	<p>
		texto
	</p>
	<p>
		texto
	</p>
</div>

Pinte o conteúdo da primeira e da terceira div em vermelho, o conteúdo da segunda div e da quarta - em verde. Para isso, atribua uma mesma classe à primeira e à terceira div, e uma classe diferente à segunda e à quarta.