Meerdere eigenschappen (classes)

Stel dat je pagina xx een h1 tags bevat. Ze moeten allemaal 3x de grote van het standaard lettertype en de eerste moet rood en de twee tekst is groen worden.

<h1>Ik ben rood en groot</h1>
<h1>Ik ben groen en groot</h1>

In ons CSS bestand gaan we drie classes aanmaken

.groot {
    font-size: 3rem;
}

.groen {
    color: green;
}

.rood {
    color: red;
}

Nu gaan we de classes toevoegen aan onze HTML code

<h1 class="groot rood">Ik ben rood en groot</h1>
<h1 class="groot groen">Ik ben groen en groot</h1>

Meerdere classes kunnen worden toegevoegd, als scheiding wordt een spatie gebruikt. Zorg ervoor dat je je classes een goede naam geeft en niet te veel eigenschappen zodat je deze steeds weer kan herbruiken. Een betere naam voor groot zou zijn geweest groot3. Je zou dan ook nog een groot2 en groot4 kunnen maken.

Voorbeeld van handige class namen

.groot2{
    font-size: 2rem;
}
.groot3 {
    font-size: 3rem;
}
.rood {
    color: red;
}
.dik {
    font-weight:bold;
}
.center {
    text-align: center;
}

Je kan nu in een tag het volgende gebruiken

<h1 class="rood groot2 dik center">Titel is rood, groot, vet en gecentreerd</h1>