Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Inhoud onderdeel: Introductie stylesheets | Stijlen verbinden met HTML | Inline stijlen | Stijlblok | Extern stijlblad | CLASS en ID | DIV en SPAN | Alternatieve stijlbladen

Gerelateerde elementen: DIV | LINK | META | SPAN | STYLE

CLASS en ID

Met behulp van de attributen CLASS en ID kunnen aan bijna elk element in een document stijlen worden toegevoegd, welke met behulp van een CLASS-selector of ID-selector zijn opgenomen in een extern stijlblad of een ingesloten stijlblok.

Het CLASS attribuut wordt toegepast, wanneer een element niet elke keer in dezelfde stijl moet worden uitgevoerd (en dus geen stijl voor het element gedefinieerd kan worden), of als dezelfde stijl voor verschillende elementen gebruikt moet kunnen worden. Het ID attribuut kan alleen toegepast worden indien de waarde ervan slechts één keer in een document wordt gebruikt.

Het verbinden van de stijl met een element gebeurt bij gebruik van het CLASS attribuut via een class-naam en in het geval van het ID attribuut via een id-waarde:

<Element CLASS="class-naam">

<Element ID="id-waarde">

De stijlregels in een stijlblad of een stijlblok voor een class-naam en een id-waarde hebben de volgende opbouw:

.class-naam { stijldeclaratie }

#id-waarde  { stijldeclaratie }

In het volgende voorbeeld zijn in een stijlblok stijlregels opgenomen voor de class-naam "speciaal" en de id-waarde "xyz987":

<STYLE TYPE="text/css">
<!--
.speciaal { color: red; background-color: white; }
#xyz987   { color: blue; background-color: white; }
-->
</STYLE>

Van elk element, waaraan het CLASS attribuut met de class-naam "speciaal" is toegevoegd, is de kleur van de tekst rood:

<H1 CLASS="speciaal">  </H1>

of

<B CLASS="speciaal">  </B>

Van het enkele voorkomen van het element, waaraan het ID attribuut met de id-waarde "xyz987" is toegevoegd, is de kleur van de tekst blauw:

<P ID="xyz987">  </P>

Zie voor meer informatie over de opbouw van CLASS-selectors en ID-selectors het onderdeel Selectors.

Vervolg: DIV en SPAN

Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 16 januari 2005