Тэг div для групавання тэгаў у HTML

У папярэднім уроке мы разабралі тэг span, які дазваляе як-то вылучыць кавалак тэксту. Існуе таксама спецыяльны тэг div, які дазваляе згрупаваць некалькі тэгаў, каб потым з імі зрабіць што-небудзь адначасова.

Хай для прыкладу з дапамогай тэгаў div мы згрупуем абзацы:

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

Давайце элементам з першай групы назначым чырвоны колер, а элементам з другой групы - зялёны:

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

Даны наступны код:

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

Афарбуйце змесціва першага дыва ў чырвоны колер, змесціва другога дыва - у зялёны, а змесціва трэцяга дыва - у блакітны. Задайце для гэтага кожнаму дыву свой клас.

Даны наступны код:

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

Афарбуйце змесціва першага і трэцяга дыва ў чырвоны колер, змесціва другога дыва і чацвёртага - у зялёны. Для гэтага першаму і трэцяму дывам дайце адзін клас, а другому і чацвёртаму - другі клас.