CSS Klassen

Wat ga je leren?

Met een klasse geef je één specifiek element een eigen stijl in plaats van alle elementen met dezelfde tag. Je ziet ook hoe je er meerdere op één element zet.

Theorie

Wat is rem?

In de voorbeelden hieronder staan groottes als 1.5rem. Dat betekent "anderhalf keer de basisgrootte van de pagina". Je hoeft er nu niets mee te doen; het hele verhaal over px, rem, em en % staat in Eenheden in CSS.

Tot nu toe heb je elementen gestijld via hun tagnaam (h1, p). Dat geldt dan voor alle <h1> of <p> elementen. Met een klasse kun je één specifiek element een stijl geven.

Je geeft een element een klasse met het class attribuut:

<p class="rood">Deze paragraaf is rood.</p>
<p>Deze paragraaf is gewoon zwart.</p>

In CSS selecteer je een klasse met een punt voor de naam:

.rood {
  color: red;
}

Meerdere klassen

Een element kan meerdere klassen hebben, gescheiden door een spatie:

<p class="rood groot">Rood én groot.</p>

Beide klassen worden dan tegelijk toegepast.

En id? — uniek vs herbruikbaar

Naast class bestaat ook het id-attribuut. Het verschil:

• class is herbruikbaar — meerdere elementen mogen dezelfde klasse hebben.
• id is uniek — een id mag maar één keer op de pagina voorkomen.

In CSS selecteer je een id met een hekje (#) in plaats van een punt:

<p id="welkom">Welkom op mijn site!</p>

#welkom {
  color: green;
  font-size: 2rem;
}

Vuistregel: gebruik class voor stijlen die je vaker wilt hergebruiken, en id voor één specifiek element dat je later ook met JavaScript wilt aanspreken.

Predict

Wat zie je als je class="rood groot" op een element zet, terwijl .rood en .groot beide in de CSS staan?

Klik hier voor het antwoord

Beide stijlen worden gecombineerd: de tekst wordt zowel rood als groot. CSS past alle klassen toe die op een element staan.

Probeer en onderzoek

Probeer eerst zelf, klap dan het antwoord uit.

1. Verwijder rood uit class="rood groot" bij de laatste paragraaf. Wat zie je?
   Antwoord

   De tekst blijft groot, maar wordt zwart. Elke klasse in het class-attribuut brengt zijn eigen regels mee; haal je er één weg, dan verdwijnen alleen die.
2. Maak in de CSS een klasse .onderstreept met text-decoration: underline en zet hem op de eerste paragraaf met class="onderstreept". Wat gebeurt er?
   Antwoord

   Alleen de eerste paragraaf krijgt een streep onder de tekst. Een klasse doet pas iets bij de elementen die hem in hun class hebben staan.
3. Zet color: blue in .groot. Welke kleur krijgt de laatste paragraaf, die rood en groot allebei heeft?
   Antwoord

   Blauw. Twee klassen wegen even zwaar, dus wint de regel die het laatst in de CSS staat, en .groot staat onder .rood. De volgorde in het class-attribuut maakt niet uit.

Editor laden...

Modify

Opdracht: Maak een nieuwe klasse .gemarkeerd die een gele achtergrond geeft. Pas het toe op de tweede paragraaf.

Editor laden...

Tip

Gebruik background-color: yellow in de nieuwe klasse. Voeg de klasse toe aan het class attribuut van de gewenste paragraaf.

Antwoord

CSS:

.gemarkeerd {
  background-color: yellow;
}

HTML (pas de gewenste <p> aan):

<p class="gemarkeerd">Alleen de klasse "rood".</p>

Of met meerdere klassen:

<p class="rood gemarkeerd">Rood én gemarkeerd.</p>

Make

Opdracht: Maak een prijzenlijst of feature-lijst met 3 items (bijvoorbeeld in 3 verschillende <div> elementen). Geef ze allemaal een standaard uiterlijk via hun HTML-tag. Geef vervolgens één van de items de klasse class="premium" en zorg ervoor dat deze via CSS een opvallende achtergrondkleur en een andere tekstkleur krijgt.

Editor laden...

Tip

Dingen die je voor de hele lijst wil, kun je toepassen op div. De opvallende stijl zet je in CSS bij .premium.

Antwoord

<div>
  <h3>Basis</h3>
  <p>Gratis</p>
</div>

<div class="premium">
  <h3>Pro</h3>
  <p>€ 10 per maand</p>
</div>

<div>
  <h3>Gevorderd</h3>
  <p>€ 20 per maand</p>
</div>

div {
  background-color: whitesmoke;
  padding: 10px;
  margin-bottom: 10px;
}

.premium {
  background-color: gold;
  color: darkred;
}

Er gaat iets mis

Punt vergeten in de CSS

/* Fout: geen punt voor de klassenaam */
rood {
  color: red;
}

/* Goed: punt voor de klassenaam */
.rood {
  color: red;
}

Zonder de punt denkt de browser dat je een HTML-element (rood) wilt stijlen, niet een klasse. De stijl wordt dan niet toegepast. Vergeet de punt nooit.