Tagul div pentru grupare de tag-uri în HTML

În lecția precedentă am analizat tagul span, care permite evidențierea unui fragment de text. Există și un tag special div, care permite gruparea mai multor tag-uri pentru a face apoi cu ele ceva simultan.

Să luăm ca exemplu gruparea paragrafelor cu ajutorul tag-urilor div:

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

Să atribuim elementelor din primul grup culoarea roșie, iar elementelor din al doilea grup - verde:

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

Este dat următorul cod:

<div>
	<h2>Titlu</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Titlu</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Titlu</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

Colorați conținutul primului div în roșu, conținutul celui de-al doilea div - în verde, iar conținutul celui de-al treilea div - în albastru. Atribuiți fiecărui div câte o clasă proprie pentru aceasta.

Este dat următorul cod:

<div>
	<h2>Titlu</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Titlu</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Titlu</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div>
	<h2>Titlu</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

Colorați conținutul primului și al treilea div în roșu, conținutul celui de-al doilea și al patrulea div - în verde. Pentru aceasta, primului și celui de-al treilea div dați-le o clasă, iar celui de-al doilea și al patrulea - altă clasă.