In deze module gaan we vooral in op het gebruik van externe stijlbladen.
Het gebruik van externe stijlbladen is ideaal als een website uit meerdere pagina’s bestaat die allemaal dezelfde opmaak hebben. De lay-out van de webpagina’s wordt in een apart CSS-bestand beschreven. De opmaakcode staat niet in de code van het HTML-document. Dit in tegenstelling tot het interne stylesheet en de inline style waarbij de CSS-code onderdeel is van de HTML-code.
Hoe koppel je nu een extern CSS-bestand aan een webpagina? Dat doe je door in het head-element van de pagina de onderstaande regel op te nemen:
<link rel="stylesheet" href="opmaak.css">
We hebben het CSS-bestand de naam opmaak.css gegeven. Met de tag <link> geven we aan dat de webpagina gekoppeld moet worden aan het vermelde CSS-bestand. In ons voorbeeld is dat dus opmaak.css. Met rel, dit is de afkorting van relation, wordt aangegeven dat we te maken hebben met een stylesheet.
Je hebt al eerder kunnen lezen dat het handig is om voor de opmaakbestanden een aparte map met de naam css aan te maken. De koppeling van de webpagina aan het externe CSS-bestand wordt dan:
<link rel="stylesheet" href="css/opmaak.css">
Deze regel zie je in het head-gedeelte van de HTML-code van ons voorbeelddocument terug:
<!DOCTYPE html>
<html lang="nl">
<head>
<title>sjabloon</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/opmaak.css">
</head>
<body>
</body>
</html>
In het bestand opmaak.css beschrijven we hoe de vormgeving van de webpagina template.html eruit moet gaan zien.
Een website bestaat meestal uit meerdere HTML-pagina’s die aan elkaar zijn gelinkt. De pagina die bij het opvragen van het adres van de website standaard wordt geopend, noemen we index.html of als er gebruik gemaakt wordt van scriptingtalen bijvoorbeeld index.php.
In de tekst hieronder staat de koppeling schematisch uitgelegd.