Div tag for grouping tags in HTML

In the previous lesson we looked at the span tag, which allows you to somehow highlight a piece of text. There is also a special div tag, which allows you to group several tags together to do something with them at the same time.

Let's use the div tags to group paragraphs as an example:

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

Let's assign the elements from the first group a red color, and the elements from the second group a green color:

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

The following code is given:

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

Color the contents of the first div red, the contents of the second div green, and the contents of the third div blue. Give each div its own class.

The following code is given:

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

Color the contents of the first and third divs red, the contents of the second div and the fourth green. To do this, give the first and third divs one class, and the second and fourth another class.