Тег div для групування тегів

У попередньому уроці ми з вами розібрали тег span, який дозволяє якось виділити шматочок тексту. Існує також спеціальний тег div, який дозволяє згрупувати кілька тегів, щоб потім зробити щось одночасно.

Нехай для прикладу за допомогою тегів div ми згрупуємо абзаци:

<div class="block1">
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>
<div class="block2">
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>

Давайте елементам із першої групи призначимо червоний колір, а елементам з другої групи - зелений:

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

Дано наступний код:

<div>
	<h2>заголовок</h2>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>
<div>
	<h2>заголовок</h2>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>
<div>
	<h2>заголовок</h2>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>

Пофарбуйте вміст першого діва в червоний колір, вміст другого діва - зелений, а вміст третього діва – в блакитний. Задайте для цього кожному діву свій клас.

Дано наступний код:

<div>
	<h2>заголовок</h2>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>
<div>
	<h2>заголовок</h2>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>
<div>
	<h2>заголовок</h2>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>
<div>
	<h2>заголовок</h2>
	<p>
		текст
	</p>
	<p>
		текст
	</p>
</div>

Пофарбуйте вміст першого та третього діва у червоний колір, вміст другого діва та четвертого – у зелений. Для цього першому і третьому дівам дайте один клас, а другому і четвертому – інший клас.