HTML-div-tagi elementtien ryhmittelyyn

Edellisessä oppitunnissa käsittelimme span-tagin, jonka avulla voit korostaa pientä tekstipalasta. On olemassa myös erityinen div-tagi, jonka avulla voit ryhmitellä useita elementtejä, jotta voit tehdä niille jotain yhtaikaa.

Esimerkkinä ryhmittelemme div-tagien avulla kappaleet:

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

Annetaan ensimmäisen ryhmän elementeille punainen väri ja toisen ryhmän elementeille - vihreä väri:

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

Annettu seuraava koodi:

<div>
	<h2>Otsikko</h2>
	<p>
		teksti
	</p>
	<p>
		teksti
	</p>
</div>
<div>
	<h2>Otsikko</h2>
	<p>
		teksti
	</p>
	<p>
		teksti
	</p>
	<p>
		teksti
	</p>
</div>
<div>
	<h2>Otsikko</h2>
	<p>
		teksti
	</p>
	<p>
		teksti
	</p>
	<p>
		teksti
	</p>
	<p>
		teksti
	</p>
</div>

Värjää ensimmäisen divin sisältö punaiseksi, toisen divin sisältö - vihreäksi, ja kolmannen divin sisältö - siniseksi. Anna jokaiselle diville oma luokka tätä varten.

Annettu seuraava koodi:

<div>
	<h2>Otsikko</h2>
	<p>
		teksti
	</p>
	<p>
		teksti
	</p>
</div>
<div>
	<h2>Otsikko</h2>
	<p>
		teksti
	</p>
	<p>
		teksti
	</p>
</div>
<div>
	<h2>Otsikko</h2>
	<p>
		teksti
	</p>
	<p>
		teksti
	</p>
</div>
<div>
	<h2>Otsikko</h2>
	<p>
		teksti
	</p>
	<p>
		teksti
	</p>
</div>

Värjää ensimmäisen ja kolmannen divin sisältö punaiseksi, toisen ja neljännen divin sisältö - vihreäksi. Anna tätä varten ensimmäiselle ja kolmannelle diville yksi luokka, ja toiselle ja neljännelle - toinen luokka.