Class en id

Class

Aan elke html tag kan je ook een class meegeven. Deze kan je vervolgens weer gebruiken in CSS. Hieronder zie je een voorbeeld van een paragraaf met een class attribuut.

<p class="artikel">Dit is een artikel</p>
<p class="artikel">Dit is ook een artikel</p>
<p class="waarschuwing">Dit is een waarschuwing</p>

In CSS kan je vervolgens de paragrafen als volgt opmaken:

p {
    de opmaak die voor alle paragraven geldt
}

p.artikel {
    de opmaak die alleen geldt voor een artikel (let op dit is dus een aanvulling op opmaak in regel 1-3)
}

p.waarschuwing {
    de opmaak die alleen geldt voor een waarschuwing (let op dit is dus een aanvulling op opmaak in regel 1-3)
}

Op deze manier kan je ook boxen (de div tags) en alle andere html tags opmaken.

Id

Zoals je hierboven ziet kan je een zelfde class voor meerdere tags gebruiken. Je kan ook het attribuut id gebruiken, alleen mag je deze maar één keer opnemen en dus niet hergebruiken. Deze hele specifieke manier van opmaken is wat minder gebruikelijk.

<p id="hoofdartikel">Dit is het hoofdartikel</p>

In CSS kan je vervolgens de paragraaf als volgt opmaken:

#hoofdartikel {
    de opmaak
}

Box model Opdracht 1