Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer CSS Koppelen aan HTML | Aan de Slag met CSS
CSS-Grondbeginselen

bookCSS Koppelen aan HTML

Veeg om het menu te tonen

Hoe CSS aan HTML wordt toegevoegd

Er zijn drie manieren om CSS toe te passen op een HTML-document:

  1. Inline stijlen;
  2. Ingesloten stijlsheets;
  3. Externe stijlsheets.

Elke methode werkt anders en wordt in verschillende situaties gebruikt.

Inline stijlen

Inline stijlen worden direct binnen een HTML-element geschreven met het attribuut style.
Voorbeeld:

index.html

index.html

copy

Deze stijl is alleen van toepassing op dit specifieke element.

Inline stijlen zijn snel te gebruiken, maar ze zijn niet herbruikbaar en lastig te beheren in grotere projecten.

Ingebedde Stijlblad

Een ingebed stijlblad wordt geschreven binnen <style>-tags in de <head>-sectie van een HTML-document.
Voorbeeld:

index.html

index.html

copy

Deze methode past stijlen toe op de gehele pagina, maar alleen binnen dit enkele HTML-bestand.

Handig voor kleine of op zichzelf staande pagina's.

Extern stijlblad

Externe CSS slaat stijlen op in een apart .css-bestand en koppelt dit aan HTML met behulp van de <link>-tag.
Voorbeeld:

index.html

index.html

styles.css

styles.css

copy

Met deze methode kunnen stijlen worden hergebruikt op meerdere pagina's.

Dit is de aanbevolen en meest schaalbare aanpak voor echte projecten.

Note
Samenvatting

Inline stijlen: direct toegepast op elementen, maar niet herbruikbaar.

Ingesloten stijlblad: toegepast binnen de <head>, heeft alleen invloed op één pagina.

Extern stijlblad: opgeslagen in een apart .css-bestand, herbruikbaar en aanbevolen voor de meeste projecten.

In deze cursus gebruiken we voornamelijk externe stijlbladen.

question mark

Welke manieren bestaan er om stijlen toe te voegen aan het HTML-document?

Select all correct answers

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 1. Hoofdstuk 2

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Sectie 1. Hoofdstuk 2
some-alt