CSS toevoegen aan een HTML-pagina

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

Met een extern CSS-bestand.
Interne CSS.
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.

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.

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.

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