CSS - Class en ID


Een Class en een ID beschrijven beiden de opmaak van een specifiek element op een website. De schrijfwijze is voor een Class een punt gevolgd door een naam en voor een ID is dat een hekje # gevolgd door een naam. Het verschil is dat je een Class meerdere keren kunt gebruiken in de pagina en een ID uniek is en dus 1 keer gebruikt mag worden.

Met Classes kun je 1 of meerdere elementen een stijl geven zoals een achtergrondkleur of lettertype eigenschappen, randen etc. De code ziet er bijvoorbeeld uit als hieronder. De naam van de Class is hier "afbeeldingen". Direct eronder staat een ID met de naam Logo.

De namen mag je dus zelf verzinnen.

.afbeeldingen {
        border:5px solid #000000;
        margin-left:50px;
}

#logo {
        border:5px solid #000000;
        margin-left:50px;
}


CSS, Class en ID

Het element krijgt dan een class in de HTML code. Voor de afbeelding wordt dit dan.

<img "src="images/css.gif" class="afbeeldingen" />


Op deze manier kun je dus meerdere elementen dezelfde opmaak geven maar ook natuurlijk één element. Heb je vijf tekstblokken in je tekst staan die dezelfde opmaak moeten hebben dan refereer je die allemaal terug naar de class die daarvoor is gemaakt.

Aanroepen

Wat aansluitend op het bovenstaande handig is om te weten is dat je elementen snel kunt opmaken door een gedeelte van een Class of ID op te nemen in de CSS. Dit is bijvoorbeeld handig in het geval dat je iets met standaard classnamen moet doen die automatisch gegenereerd worden door een content management systeem.

Hieronder een voorbeeld. Zoals hieronder is aangegeven worden alle elementen waar het gedeelte 'slider' voorkomt in de ID voorzien van de onderstaande opmaak. Heb je dus een ID "slider-left" en een ID "slider-top" dan krijgen beide de onderstaande opmaak.

div[id*=slider] {
        border:5px solid #000000;
        margin-left:50px;
}