# Class en id

# HTML-attributen class en id

Via de attributen class en id kan je eender welk element op een HTML-pagina een soort naam geven die in CSS en Javascript gebruikt kan worden om de elementen te benaderen. Je hebben dus geen structurele waarde. Het verschil tussen class en id is dat het id attribuut een element uniek bepaalt op een pagina. Twee elementen kunnen dus niet hetzelfde id krijgen. Het attribuut class daarentegen kan met dezelfde waarde hergebruikt worden.

# id

Het attribuut id gebruik je vooral om één specifiek element dat een speciale betekenis of functie op jouw pagina heeft uniek aan te duiden, zoals bijvoorbeeld een verzendknop, container voor andere elementen of een specifieke afbeelding.

<!-- button-element maakt een klikbare knop -->
<button id="verzenden">Verzenden</button>

# class

Het attribuut class kan je gebruiken om verschillende elementen onder een zelfgekozen categorie te hangen, zoals bijvoorbeeld sociale media links, productnamen, de datum van een artikel, ...

Het grote voordeel van classes is dat je ze kan hergebruiken op verschillende plaatsen en zelfs verschillende pagina's. Het wordt dan eenvoudig op CSS stijlregels toe te passen op deze klassen en ze een mooie opmaak te geven!

<p class="bijsluiter">Informatie van de bijsluiter</p>

<!-- a-element maakt een link -->
<a href="http://www.facebook.com/profiellink" class="sociaal">Naar Facebook pagina</a>
<a href="http://www.twitter.com/profiellink" class="sociaal">Naar Twitter pagina</a>

Je kan ook meerdere waardes opgeven voor het class attribuut. Dit doe je door de klassenamen te scheiden door een spatie. In het volgende voorbeeld hangen we nog de extra klasse inspringen aan de paragraaf:

<p class="bijsluiter inspringen">Informatie van de bijsluiter</p>

# class en id selectoren

Om in CSS de twee attributen te gebruiken als selector, en dus rechtstreeks elementen te benaderen waarvan het class of id attribuut overeenkomt, gebruik je de volgende syntax:

.klassenaam {
    /* Stijlregels */
}

#idnaam {
    /* stijlregels */
}

Het volgende voorbeeld illustreert de volledige samenwerking tussen HTML en CSS met betrekking tot class en id.

<h2>Homeopatisch middel bestellen</h2>
<!-- button-element maakt een klikbare knop -->
<button id="verzenden">Bestellen</button>

<p class="bijsluiter inspringen">Uit de buurt van kinderen houden. Niet gebruiken bij zwangerschap.</p>

<!-- a-element maakt een link -->
<a href="http://www.facebook.com/profiellink" class="sociaal">Naar Facebook pagina</a><br>
<a href="http://www.twitter.com/profiellink" class="sociaal">Naar Twitter pagina</a>

.sociaal {
    color: red;

    /* Haal onderlijning weg van link */
    text-decoration: none;
  
    font-weight: bold;  
}

.bijsluiter {
    /* Schuin gedrukt */
    font-style: italic;

    /* Kleinere tekstgrootte dan ouderelement */
    font-size: 0.8em;
}

.inspringen {
    /* Tekst inspringen */
    text-indent: 2em;
}

#verzenden {
    /* Voorzie meer witruimte binnen het element */
    padding: 0.5em;
}