Terug

CSS 2 – Id en Class

id

In het vorige practicum heb je geleerd hoe je álle elementen van een bepaald type, bijvoorbeeld alle of alle

tags, kunt opmaken. Maar wat nou als je één specifiek element wil opmaken, bijvoorbeeld één paragraaf op je pagina?

Dan geef je dat element in HTML een id-attribuut, bijvoorbeeld:

<p id="contactinformatie">Stuur me een mail!</p>

Vervolgens kun je in CSS met een # diezelfde id gebruiken om het element op te maken:

#contactinformatie {
  font-weight: bold;
}

Let op: een id mag je per HTML pagina maar één keer gebruiken!

  1. Geef in je HTML bestand een paragraaf en een afbeelding ieder een ander id en daarmee opmaak in CSS.

class

Als je meerdere elementen dezelfde opmaak wil geven, geef ze dan een class attribuut.

<a href="index.html" class="menu-item">Home</a>
<a href="portfolio.html" class="menu-item">Portfolio</a>
<a href="about.html" class="menu-item">Over mij</a>

Met een punt kun je de class vervolgens aanduiden in CSS:

.menu-item {
  background-color: rgb(255,0,0);
}
  1. Maak in je pagina een menu van <a> tags, waarin je elk menu-item dezelfde class geeft, en daarmee opmaak in CSS.