2.2: Classes

Om aan elk gewenst element een style toe te kennen, en dus niet aan elk element van hetzelfde type, kunnen we classes gebruiken. Classes kunnen in een CSS-bestand gemaakt worden door een class-naam te maken en daaraan style-opties toekennen. Doordat je zelf namen voor classes kan verzinnen, kun je zoveel classes maken als je zelf wilt. Kies wel voor pakkende namen, zodat je bepaalde classes later weer makkelijk kan terugvinden.
In html5 kun je daarna aan elementen deze class-naam toekennen. Dit doe je door de optie class="" aan een element toe te voegen, bijvoorbeeld: <h1 class=""></h1> of <table class=""></table>. Je maakt de classes dus aan in CSS en je roept ze weer op in html5

Het maken van classes in CSS kan op twee manieren, namelijk:

Door te beginnen met een . (punt) en daarachter een naam te zetten (let op: dit is hoofdlettergevoelig en spaties vermijden!). Dit kan bijvoorbeeld zijn .nieuws
Of je begint met het type element waar de class straks aan toegekend zal gaan worden en daarachter zet je dan de . met de naam van de class. Bijvoorbeeld h1.nieuws

Het verschil tussen deze twee zit hem in het feit dat punt 1 aan elk gewenst element toegekend kan gaan worden. Maar punt 2 zal alleen gaan werken als je het toekent aan een element van het type <h1>. De keuze of je 1 of 2 gebruikt heb je zelf in de hand. Als je punt 2 gebruikt heb je in je CSS-bestand wel iets meer overzicht aan welk element het toegekend kan zijn, maar daarentegen mag je het niet gebruiken bij andere elementen. Hieronder zijn voorbeelden van de twee verschillende versie:

Beide voorbeelden hebben 2 koppen van het type <h1> en 2 paragrafen <p>. Zoals je in het voorbeeld ziet zijn aan alle vier de elementen de optie class="" toegevoegd. Op deze manier ken je dus een class aan een bepaald element toe.

html5 code

CSS bestand

Internet Explorer

<html>
  <head>
    <title>Titel van website</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" media="all" />
  </head>
<body>
<h1 class="nieuws">Eerste kop van de webpagina</h1>
<p class="nieuws">Tekst na de eerste kop...</p>
<h1 class="nieuws">Tweede kop</h1>
<p class="nieuws">Tekst na de tweede kop...</p>
</body>
</html>

.nieuws{
font-size: 16px;
color: #8822aa;
font-style: italic;
}

Eerste kop van de webpagina

Tekst na de eerste kop...

Tweede kop

Tekst na de tweede kop...

In het volgende voorbeeld is er in het CSS-bestand dus een h1 voor de class-naam gezet, hierdoor zullen deze style-opties alleen gelden voor elementen van het type <h1>. Je ziet dus dat de teksten van de paragrafen weer normaal staan en gewoon zwart van kleur zijn, ook al zijn de <p> elementen wel voorzien van de optie class="nieuws"!