Classes en ID’s kun je gebruiken om een element of een deel van een website te stijlen. De fout die hierbij veel wordt gemaakt is dat de ID’s meerdere malen gebruikt worden op dezelfde pagina. Hierbij is het goed om te onthouden dat ID’s slechts 1 keer per pagina gebruikt mogen worden en bij classes kun je die vaker gebruiken. Een CSS class hoef je maar 1 keer te maken en kun je daarna altijd gebruiken en daarom raad ik ook aan om voor de meeste zaken een class te gebruiken in plaats van ID.
Hoe ziet een ID er uit?
Een ID kun je 1 keer per pagina gebruiken en ziet er in de CSS uit als een hekje: #. In de HTML kun je een ID aanmaken door de volgende code toe te voegen:
<div id="inhoud"> <p>Hier staat dan de inhoud van de website.</p> </div>
Met dit stukje code:
<div id="inhoud">
Vertel je dat de inhoud van de website komt te staan in de ID inhoud: #inhoud.
In de CSS kunt je dit ID nu gaan stylen. Voeg je bijvoorbeeld deze code toe:
#inhoud {
font-size: 40px;
color: #ff0080;
}
Dan zal alles wat in het ID staat 40px groot worden en een roze kleur krijgen.
Het enige nadeel van het ID # is dat het maar 1 keer gebruikt kan worden per pagina. Als er dus meer elementen zijn die de grote letters met roze kleur moeten krijgen is het verstandiger om er een class van te maken.
Hoe ziet een class eruit?
Een class kun je meerdere keren per pagina gebruiken en ziet er uit als een punt: .
Wil je de grote letters en roze tekst op meerdere plekken terug laten komen? Dan is een class hier de beste oplossing voor. Dit is dan de code die je zou kunnen gebruiken:
<div class="grootroze"> <p>Dit gedeelte van de tekst zal grote letters hebben en een roze kleur</p> </div> <p>Dit is klein</p> <div class="grootroze"> <p>Dit is weer groot en roze</p> </div>
De CSS class die zal er dan als volgt uit zien in de style.css:
.grootroze {
font-size: 40px;
color: #ff0080;
}
Heb je nu verder op in de pagina nog een keer de grote letters met roze tekst nodig? Dan kun je gemakkelijk de class opnieuw aanroepen zonder dat je in de CSS opnieuw een class hoeft te maken.
Dus HTML/CSS class of ID?
Ik zou het ID alleen gebruiken als je zeker weet dat het element slechts 1 keer op de pagina voorkomt. Denk hierbij bijvoorbeeld aan de header, het menu of de footer. Voor alle andere elementen die vaker terug komen zou ik een class gebruiken.
Meer vragen? Laat hieronder een bericht achter of neem contact met me op 🙂