Om stijlen effectief toe te passen, is het belangrijk om CSS-selectors te begrijpen. Deze bepalen welke HTML-elementen worden geselecteerd voor styling. Laten we de belangrijkste typen selectors verkennen.

Tagselector

Een manier om stijlen toe te passen is door gebruik te maken van het elementtag zelf. Stijlen die met een tagselector worden gespecificeerd, zijn van toepassing op alle elementen met die tag. Dit is handig voor het toepassen van consistente styling op elementen over de hele website.

Syntax: In de HTML hebben we een p-element:

<p>It was all in my head.</p>

Om stijlen toe te passen in het CSS-bestand, gebruik je de tagnaam (p) als selector:

p {
  property: value;
}

Voer het volgende voorbeeld uit en bekijk het resultaat.

Classeselector

Een meer precieze methode om elementen te stijlen is door gebruik te maken van classeselectors. Deze selectors richten zich op elementen met specifieke classnamen, waardoor stijlen selectief kunnen worden toegepast.

Syntax: Voeg in de HTML een class-attribuut toe met een betekenisvolle classnaam:

<p class="text">This song is another hit.</p>

Verwijs in de CSS naar de classnaam met een punt (.) om de stijlen te definiëren:

.text {
  property: value;
}

Voer het volgende voorbeeld uit en observeer dat alleen elementen met de text-class deze stijlen ontvangen, wat meer controle over de opmaak biedt.

Alle elementen met het attribuut class="text" worden opgemaakt met rode tekst, een lettergrootte van 24px en een achtergrondkleur van tarwe. De classnaam text is gedefinieerd in index.css met behulp van een .-prefix.

Klassecompositie

Het is ook mogelijk om meerdere klassen op één element te combineren, waardoor klassecompositie een krachtig hulpmiddel is voor het toepassen van stijlen - scheid klassenamen met spaties in het class-attribuut.

Syntaxis: Voeg in de HTML meerdere klassenamen toe aan een element:

<p class="text font">A robot created chemicals.</p>

Definieer in de CSS stijlen voor elke klasse afzonderlijk:

.text {
  property: value;
}

.font {
  property: value;
}

Voer het volgende voorbeeld uit om te zien hoe dit werkt. Elementen met zowel de text- als de font-klasse ontvangen de opgegeven stijlen.

Het <p>-element met zowel de text- als de font-klasse ontvangt stijlen van beide selectoren. De text-klasse stelt de kleur in op navy en de font-klasse stelt de lettergrootte in op 24px.

Id-selector

Hoewel het mogelijk is om de id-selector te gebruiken voor styling, wordt dit over het algemeen niet aanbevolen. Id's moeten uniek zijn op een pagina, waardoor hergebruik wordt beperkt.

Syntax: Voeg in de HTML een id-attribuut toe aan een element:

<p id="title">Choose from different themes.</p>

Verwijs in de CSS naar de id met een hekje (#) om de stijlen te definiëren:

#title {
  property: value;
}

Voer het volgende voorbeeld uit en observeer het resultaat. Dit voorbeeld past stijlen toe op het unieke element met de title-id.

Het id="title" attribuut identificeert het <p>-element uniek, en de stijlen die met de #title-selector zijn gedefinieerd, zijn alleen van toepassing op dat specifieke element.