Η ετικέτα div για την ομαδοποίηση ετικετών σε HTML

Στο προηγούμενο μάθημα αναλύσαμε την ετικέτα 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 σε κόκκινο χρώμα, το περιεχόμενο του δεύτερου div - σε πράσινο, και το περιεχόμενο του τρίτου div - σε γαλάζιο. Ορίστε για αυτό σε κάθε 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>

Βάψτε το περιεχόμενο του πρώτου και τρίτου div σε κόκκινο χρώμα, το περιεχόμενο του δεύτερου div και του τέταρτου - σε πράσινο. Για αυτό, δώστε στο πρώτο και στο τρίτο div μία κλάση, και στο δεύτερο και στο τέταρτο - μια άλλη κλάση.