De div-tag voor het groeperen van tags in HTML
In de vorige les hebben we de
span-tag besproken, waarmee je
een stuk tekst kunt markeren.
Er is ook een speciale
tag div, waarmee je
meerdere tags kunt groeperen
om er vervolgens tegelijkertijd
iets mee te doen.
Laten we bijvoorbeeld met de tags div
alinea's groeperen:
<div class="block1">
<p>
tekst
</p>
<p>
tekst
</p>
</div>
<div class="block2">
<p>
tekst
</p>
<p>
tekst
</p>
</div>
Laten we voor de elementen uit de eerste groep de kleur rood instellen, en voor de elementen uit de tweede groep - groen:
.block1 {
color: red;
}
.block2 {
color: green;
}
Gegeven de volgende code:
<div>
<h2>Titel</h2>
<p>
tekst
</p>
<p>
tekst
</p>
</div>
<div>
<h2>Titel</h2>
<p>
tekst
</p>
<p>
tekst
</p>
<p>
tekst
</p>
</div>
<div>
<h2>Titel</h2>
<p>
tekst
</p>
<p>
tekst
</p>
<p>
tekst
</p>
<p>
tekst
</p>
</div>
Kleur de inhoud van de eerste div rood, de inhoud van de tweede div - groen, en de inhoud van de derde div - blauw. Wijs hiervoor aan elke div een eigen klasse toe.
Gegeven de volgende code:
<div>
<h2>Titel</h2>
<p>
tekst
</p>
<p>
tekst
</p>
</div>
<div>
<h2>Titel</h2>
<p>
tekst
</p>
<p>
tekst
</p>
</div>
<div>
<h2>Titel</h2>
<p>
tekst
</p>
<p>
tekst
</p>
</div>
<div>
<h2>Titel</h2>
<p>
tekst
</p>
<p>
tekst
</p>
</div>
Kleur de inhoud van de eerste en derde div rood, de inhoud van de tweede div en de vierde - groen. Geef hiervoor aan de eerste en derde div dezelfde klasse, en aan de tweede en vierde - een andere klasse.
