logo

Extra Block Types (EBT) - Nieuwe Layout Builder ervaring❗

Extra Block Types (EBT) - gestileerde, aanpasbare bloktypes: Slideshows, Tabs, Cards, Accordions en vele andere. Ingebouwde instellingen voor achtergrond, DOM Box, javascript-plugins. Ervaar vandaag al de toekomst van layout building.

Demo EBT-modules Download EBT-modules

❗Extra Paragraph Types (EPT) - Nieuwe Paragraphs ervaring

Extra Paragraph Types (EPT) - analoge op paragrafen gebaseerde set modules.

Demo EPT-modules Download EPT-modules

Scroll
  1. Home
  2. Articles

CSS-handleiding – Les 1 – CSS-stijlen koppelen

10/10/2025, by Ivan

Ik ga niet uitleggen waarom CSS nodig is. Als je deze handleiding hebt geopend, betekent dat dat je het graag wilt leren. Ik zal alleen zeggen dat de mogelijkheden van CSS enorm zijn en het mogelijk maken om lay-outs van elke complexiteit te bouwen. Het gebruik van CSS betekent echter ook dat je zult moeten stoppen met het gebruiken van HTML-attributen zoals size, color, bgcolor, align en andere die CSS in de weg zitten.

Er bestaan minstens drie manieren om CSS aan je HTML-bestand te koppelen. Laten we de eenvoudigste bekijken, daarna de tweede en tenslotte de juiste manier.

CSS binnen een tag

CSS kan worden toegevoegd met behulp van het attribuut style:

<div style="width: 200px; height: 100px;">
  Blok
</div>

Zo maken we een blok van 200 bij 100 pixels. Laten we bekijken hoe CSS wordt geschreven. Eerst schrijven we het attribuut style="". Vervolgens schrijven we binnen de aanhalingstekens de CSS-stijlen.

style="parameter:waarde;parameter:waarde;parameter:waarde"

We schrijven de stijlen als volgt: eerst komt de parameter (width, height en andere), daarna een dubbele punt en de waarde van de parameter. Elke parameter scheiden we met een puntkomma.

Laten we nu de tweede manier van CSS-schrijven bekijken.

CSS aan het begin van het HTML-document

Hiervoor gebruiken we de tag <style></style>, waarin we CSS-code schrijven.

<html>
 <head>
  <title>CSS-handleiding</title>
  <style type="text/css">
  hier schrijven we CSS-code
  </style>
 </head>
 <body>
  <p>Leer CSS samen met drupalbook.org</p>
 </body>
</html>

De tag style schrijven we binnen de tag <head></head>, na de <title>-tag. Laten we wat CSS-code schrijven:

<html>
 <head>
  <title>CSS-handleiding</title>
  <style type="text/css">
   body{
     background: #eeeeee; /* achtergrond van de pagina */     
     font-size: 14px;     /* lettergrootte */
   }
   p{
     color: #ff0000; /* tekstkleur */
   }
  </style>
 </head>
 <body>
  <p>Leer CSS samen met drupalbook.org</p>
  <p>Regel 2 – leer CSS samen met drupalbook.org</p>
 </body>
</html>

Laten we bekijken hoe CSS voor tags wordt geschreven. Als we de naam van een tag in CSS schrijven, worden de CSS-parameters toegepast op alle tags van dat type. Dus als we p schrijven, betekent dit dat de stijlen gelden voor alle paragrafen.

Wanneer we CSS-code schrijven, geven we eerst de tag aan waarop we de stijlen willen toepassen, en vervolgens schrijven we de CSS-stijlen tussen accolades. CSS-stijlen worden op dezelfde manier geschreven als binnen het attribuut style="":

parameter:waarde;parameter:waarde;parameter:waarde

Parameter, dubbele punt, waarde, puntkomma — en dan weer parameter, dubbele punt, waarde, puntkomma, enzovoort. Na de laatste eigenschap mag je de puntkomma weglaten, maar het is beter om hem altijd te plaatsen.

We hebben CSS-stijlen op twee manieren toegevoegd, en nu gaan we de derde en beste manier gebruiken.

CSS in een apart bestand

Dit is de beste methode, omdat het CSS volledig scheidt van de HTML-code. Natuurlijk kan het soms verleidelijk zijn om CSS direct in de HTML te plaatsen, maar probeer dit te vermijden en gebruik liever een apart bestand. Waarom?

Het belangrijkste idee van CSS is het scheiden van inhoud en opmaak. HTML is bedoeld om tekst en structuur weer te geven, terwijl CSS bepaalt hoe die tekst eruitziet — de grootte, kleuren, vormen, randen en marges.

Ten eerste: wanneer HTML en CSS zich in hetzelfde bestand bevinden, wordt de code onleesbaar en log. Ten tweede: CSS-bestanden worden in de browsercache opgeslagen, dus als de CSS apart staat, wordt de pagina sneller geladen — de CSS hoeft slechts één keer te worden opgehaald. Ik denk dat het nu duidelijk is waar ik naartoe wil?

Je moet proberen CSS altijd in een apart bestand te zetten! Dat is de kern van het verhaal. Laten we nu een apart CSS-bestand aanmaken. Hiervoor gebruiken we de tag <link>:

<html>
 <head>
  <title>CSS-handleiding</title>
  <link type="text/css" rel="stylesheet" media="all" href="styles.css" />
 </head>
 <body>
  <p>Leer CSS samen met drupalbook.org</p>
  <p>Regel 2 – leer CSS samen met drupalbook.org</p>
 </body>
</html>

De tag <link> heeft de volgende attributen:

type="text/css" — geeft aan dat het een CSS-bestand is,

rel="stylesheet" — duidt aan dat het bestand een stylesheet is,

media="all" — betekent dat deze CSS geldt voor alle apparaten waarop de site wordt bekeken,

href="styles.css" — pad naar het CSS-bestand; in ons geval is het een relatief pad.

Nu we weten hoe we een CSS-bestand moeten koppelen, maak dat bestand styles.css aan in dezelfde map als je HTML-bestand.

Open daarna het bestand styles.css en voeg de volgende CSS-stijlen toe:

body{
  background: #eeeeee; /* achtergrond van de pagina */
  font-size: 14px;     /* lettergrootte */
}
p{
  color: #ff0000; /* tekstkleur */
}

Sla dit bestand op en open vervolgens je HTML-bestand in de browser. Nu is de CSS correct gekoppeld via een apart bestand. In de volgende les zullen we in detail bekijken hoe we stijlen in een extern CSS-bestand schrijven.