Met een stylesheet kun je CSS en HTML van elkaar scheiden zonder de logische verbinding te verliezen. Dit heeft als voordeel dat je minder hoeft te typen. Bovendien is het overzichtelijker en laadt je pagina sneller.
Let op: maak eerst een nieuw leeg tekstbestand aan ter voorbereiding. Dit bestand sla je op als ‘stylesheet.css’ in dezelfde map als je HTML-bestand.
HTML en CSS koppelen
In het eerste deel van deze serie behandelden we een paar CSS-beginselen om te laten zien hoe je zonder veel programmeerkennis het design van je website kunt aanpassen. Nu gaan we over tot de praktijk. Hoe koppel je een CSS-stylesheet aan jouw website, zodat elke pagina in dezelfde opmaak wordt weergegeven?
Je kunt je CSS-regels uiteraard telkens binnen het stijlattribuut van een HTML-tag inbedden. Dit maakt het verband tussen CSS en HTML duidelijk: ‘deze CSS-instructie is van toepassing op deze HTML-tag’. Maar deze werkwijze is nogal inefficiënt als je meer dan eens dezelfde instructie nodig hebt, zoals in dit voorbeeld:
<html>
<body>
<h1 style=“font-family: Arial; font-size: 30px; color: red;”>Kop</h1>
<p style=“font-family: Arial; font-size: 16px; color: black;”>Eerste alinea.</p>
<h2 style=“font-family: Arial; font-size: 24px; color: orange;”>Tussenkopje</h2>
<p style=“font-family: Arial; font-size: 16px; color: black;”>Tweede alinea.</p>
</body>
</html>
HTML en CSS van elkaar scheiden
Dat kan gelukkig ook korter. Daarvoor moeten we HTML en CSS van elkaar scheiden ofwel in twee aparte bestanden opslaan. Daarbij doe je in eerste instantie niets anders dan wat hierboven in het stijlattribuut staat (“font-family: Arial; font-size: 30px; color: red;” etc.) tussen de accolades te plakken.
We hadden in het eerste deel al gezien hoe een CSS-regel eruitziet, maar waren nog niet op de ‘selectoren’ ingegaan:
Selector { Eigenschap : Waarde ; }
Een selector kiest HTML-elementen waarvoor de daarna genoemde eigenschappen moeten gelden. De eenvoudigste variant van een selector is de naam van de HTML-tag, in dit geval bijvoorbeeld ‘p’, ‘h1’ en ‘h2’.
p {
font-family: Arial;
font-size: 16px;
color: black;
}
Deze CSS-regel zegt dat voor alle <p>-tags de eigenschappen tussen de haakjes van toepassing zijn.
Vervolgens plaats je deze CSS-regel voor de <p>-tag in het lege ‘stylesheet.css’-bestand. Voor de browser maakt het niet uit of je CSS voor mensen leesbaar is. Maar als je later iets wilt wijzigen of problemen moet oplossen, is het handig om precies te weten welke functie een CSS-regel heeft. Je kunt dus rustig je eigen notities toevoegen.
HTML opruimen
Zodra je HTML en CSS van elkaar scheidt, heb je de CSS in de stijlattributen voor de <p> tags natuurlijk niet meer nodig. De HTML-code ziet er weer schoon uit:
<html>
<body>
<h1>Kop</h1>
<p>Eerste alinea.</p>
<h2>Tussenkop</h2>
<p>Tweede alinea.</p>
</body>
</html>
Het bestand ‘stylesheet.css’ bevat deze code:
p {
font-family: Arial;
font-size: 16px;
color: black;
}
h1 {
font-family: Arial;
font-size: 30px;
color: red;
}
h2 {
font-family: Arial;
font-size: 24px;
color: orange;
}
Externe stylesheet laden
Om dit alles goed te laten werken en om ervoor te zorgen dat alles er weer uitziet als voorheen, moet je nog één cruciale stap volgen: het stylesheet moet worden geladen. Dit doe je met een <link>-tag (niet te verwarren met het anker <a>).
<link> hoort thuis in de kop van het HTML-document, tussen en <head> en <head> .
<html>
<head>
<link rel=“stylesheet” href=“stylesheet.css”>
</head>
<body>
<h1>Kop</h1>
<p>Eerste alinea.</p>
<h2>Tussenkopje</h2>
<p>Tweede alinea.</p>
</body>
</html>
De duidelijke opmaak is een groot voordeel van deze scheiding van CSS en HTML. Bovendien kun je nu meer HTML-pagina’s bouwen en daar steeds hetzelfde stylesheet voor gebruiken. Aangezien de browser het stylesheet na het laden in de cache opslaat, laden de pagina’s sneller.
CSS-selectoren zijn het meest complexe onderdeel van CSS en gaan veel verder dan wat je in deze tutorial hebt gelezen. Wil je meer weten? Lees dan de CSS-artikelen op W3schools.
Wil je CSS voor je eigen website gebruiken?
Naar de STRATO hostingpakketten
Oliver Meiners
Hallo, ich bin Oliver. Ich bin Mitarbeiter im Kundenservice und helfe Dir bei Fragen zu HiDrive, Servern und zum STRATO Webshop.
Je kunt pas een reactie plaatsen nadat je ons privacybeleid en cookies hebt geaccepteerd. Om privacyredenen mogen wij jouw persoonsgegevens anders niet verwerken.
Klik onderaan de pagina op de blauwe button OK. Nadat je de pagina opnieuw hebt geladen, kun je een reactie achterlaten.