CSS toevoegen aan een HTML-pagina

Er zijn drie manieren om CSS in een HTML-pagina in te voegen:

  1. Met een extern CSS-bestand.
  2. Interne CSS.
  3. Inline CSS.

CSS toevoegen met een extern CSS-bestand

  • Met een extern CSS-bestand kunt u het uiterlijk van een hele website wijzigen met slechts één bestand!
  • Elke webpagina van de website moet verwijzen naar een extern stylesheet-bestand binnen een <link>-element in het <head>-gedeelte.
  • Een CSS-bestand kan met elke tekstverwerker worden geschreven.
  • De bestandsextensie is altijd .css.
  • Het externe .css-bestand mag geen HTML-tags bevatten.


<!-- Voorbeeld van het verwijzen naar een extern CSS-bestand -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="mystyle.css">
</head>
<body>
  <h1>This is a heading.</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Het externe stylesheet-document ziet er als volgt uit:


/* CSS-regels voor de pagina */
body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Interne CSS

Een interne stylesheet wordt gebruikt wanneer een bepaalde pagina een andere opmaak heeft dan de andere pagina's van de website.

Een interne stijl wordt gedefinieerd binnen het <style>-element, in het <head>-gedeelte van de webpagina.


<!-- Voorbeeld van interne CSS -->
<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS-regels voor de pagina */
    body {
      background-color: linen;
    }

    h1 {
      color: maroon;
      margin-left: 40px;
    }
  </style>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Inline CSS

  • Een inline-stijl wordt gebruikt om een unieke stijl toe te passen op één enkel element.
  • De inline-stijl wordt toegevoegd aan het element via het "style"-attribuut. Het "style"-attribuut kan elke CSS-eigenschap bevatten.

<!-- Voorbeeld van inline CSS -->
<!DOCTYPE html>
<html>
<body>
  <h1 style="color: blue; text-align: center;">This is a heading</h1>
  <p style="color: red;">This is a paragraph.</p>
</body>
</html>

Het gebruik van inline-stijlen vermindert grotendeels de voordelen van een stylesheet, aangezien het inhoud en vormgeving vermengt. Het is raadzaam om deze methode spaarzaam te gebruiken.

Terug naar boven