Ga naar hoofdinhoud

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 het zelf.​

Editor laden...

Investigate​

Experimenteer:

  • Wat zie je als je class="rood" verwijdert bij de derde paragraaf?
  • Voeg een klasse .onderstreept toe in de CSS met text-decoration: underline. Pas het op één element toe.
  • Wat gebeurt er als je dezelfde eigenschap in twee klassen hebt? (bijv. color: red in .rood en color: blue in een andere klasse — welke wint?)

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.