This article has been localized into Dutch by the community.
Verband tussen CSS en HTML
Eerder hebben we uitgelegd dat CSS de informatie bevat die jouw markup taal (meestal HTML) vertelt hoe het document er voor de lezer uit moet zien. Dat wil dus zeggen dat we twee talen met elkaar moeten verbinden en dat we de browser moeten meedelen dat je een stukje code in de ene taal (HTML) wil combineren met een stukje code in de andere taal (CSS). Om het flexibel te houden zijn er drie manieren verzonnen om dit voor elkaar te krijgen.
Inline CSS via het style attribuut.
Bijna iedere HTML tag heeft het style attribuut. Door gebruik van dit attribuut kan je CSS regels direct toepassen op het bijbehorende HTML element. Natuurlijk is dit tegen een van de principes van CSS ("zoveel mogelijk hergebruik van bestaande code") omdat het style attribuut maar op één HTML element toegepast wordt en niet voor andere HTML elementen gebruikt kan worden.
Maar het is wel erg handig om de werking van CSS regels te proberen in een testomgeving die je later toch weggooit. Hier is hoe je het kan doen:
<span style="color: Blue; text-decoration: underline;">Hello, CSS!</span>Merk op dat je meerdere properties kan definiëren voor een enkel HTML element. In dit geval hebben we een CSS regel voor de properties color (kleur) en decoration (decoratie) van de tekst. Deze inline methode is veruit de gemakkelijkste manier om CSS toe te passen, omdat er geen extra tags of bestanden nodig zijn, alleen maar het style attribuut toegevoegd aan de tag. Maar zoals eerder al uitgelegd, deze methode is in feite strijdig met de principes van CSS.
Een ander nadeel van de inline methode is dat iedere keer als de webpagina gedownload wordt, alle style attributen van alle tags die er een hebben mee het internet overgaan. Voor een enkele tag met een style attribuut is dat niet erg, maar als je zoiets in een loop doet waarin hetzelfde style attribuut aan zeer vele tags wordt toegevoegd, dan vraagt je webpagina aanzienlijk meer geheugenruimte. Het kan dan gebeuren dat het niet meer in de cache past en het document iedere keer dat het geopend wordt opnieuw gedownload moet worden.
Style blocks voor document-breed CSS.
De op een na gemakkelijkste manier om CSS te gebruiken is via een style block. HTML heeft een tag "style" die CSS code kan bevatten. Tussen <style> en </style> kan je alle CSS regels opnemen die je nodig hebt, en die regels kan je op HTML elementen in hetzelfde document toepassen. Hier volgt een voorbeeld waarin de style tag het ietwat overbodige attribuut "type" meekrijgt:
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<style type="text/css">
.highlight {
color: Blue;
text-decoration: underline;
}
</style>
</head>
<body>
This is a piece of <span class="highlight">text</span> with <span class="highlight">highlighted</span> elements in <span class="highlight">it</span>.
</body>
</html>Merk op dat de CSS regel op één plek is gedefinieerd en toegepast wordt op drie verschillende span tags. De regel kan ook op andere soorten HTML tags dan <span> toegepast worden. In één document zijn meerdere style blocks toegestaan en je mag ze zetten waar je wil. Het wordt echter aanbevolen om ze in de <head> sectie te zetten aan het begin van je HTML document, dat is het overzichtelijkst.
Globale CSS regels in externe CSS bestanden
We hebben net gezien dat je de CSS code in een style block door het hele document heen kan gebruiken, maar je moet het style block wel opnemen in elk HTML document op je website die dezelfde CSS regels toepast. Dat heeft twee nadelen: als je in de CSS iets verandert, moet je dat voor alle documenten doen. In de tweede plaats moet de browser iedere keer hetzelfde style block downloaden als er een nieuwe pagina van je site geopend wordt die ook diezelfde CSS gebruikt. Als een style block in een extern bestand staat hoeft de browser het maar één keer te downloaden en in de cache te zetten.
Een CSS bestand is in het algemeen een plat (plain) bestand in ASCII dat met een eenvoudige teksteditor aangemaakt kan worden. (Niet-ASCII karakters kunnen voorkomen in een CSS bestand, maar dat is zo zeldzaam dat we hier niet verder op ingaan.) De naam van het bestand moet de extensie .css hebben en het bevat dezelfde soort CSS regels als we eerder tegengekomen zijn. Laten we aannemen dat we het bestand opgeslagen hebben met de naam style.css en dat het bestand de CSS regels uit het vorige voorbeeld bevat:
.highlight {
color: Blue;
text-decoration: underline;
}We kunnen in ons HTML document naar style.css verwijzen met behulp van het HTML link element:
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
This is a piece of <span class="highlight">text</span> with <span class="highlight">highlighted</span> elements in <span class="highlight">it</span>.
</body>
</html>Dit voorbeeld vereist dat het HTML en CSS bestand in dezelfde folder (directory) staan. Als dat niet zo is moet de bestandsnaam in het href attribuut aangevuld worden met het juiste pad.
Dus nu weten hoe we onze CSS code in een eigen bestand kunnen zetten. Maar pas bij het verwijzen in webpagina's merken we hoe tevoren vastgelegde CSS regels het leven makkelijk kan maken. Als je wil kan je ook nog je CSS code opdelen in verschillende bestanden en alleen verwijzen naar bestanden die je nodig hebt; het hangt er allemaal van af hoe groot je website is en hoe je de site wil organiseren.
Samenvatting
We hebben in dit hoofdstuk drie verschillende manieren besproken waarmee je webpagina CSS kan consumeren.
De eerste manier was met de inline style attribuut. Het grootste voordeel van deze methode is dat hij zo gemakkelijk toe te passen is. Maar zijn nadeel is dat hij tegen een paar belangrijke principes van CSS indruist, namelijk: hergebruik van code, eventuele stijl veranderingen slechts op één plek, en de toepasbaarheid van de CSS regels door je hele website heen.
De tweede aanpak is gebaseerd op het style block. Het is minder vermoeiend om toe te passen dan de inline style attribuut en het maakt hergebruik van code mogelijk. Zijn grootste nadeel is dat de code in een style block slechts geldig is voor één document, en niet voor meerdere webpagina's tegelijk. Dit betekent dat je een gegeven style block in elke subpagina van je website moet insluiten.
De derde aanpak wordt het meest gebruikt in de praktijk. Het is gebaseerd op Externe CSS bestand(en). Deze methode heeft een klein nadeel: je moet een nieuw bestand aanmaken dat bestaat naast je andere webdocumenten. Maar dit valt in het niet bij het voordeel dat je je CSS code kan hergebruiken door je hele website heen!
Let er alsjeblieft op dat we overal in deze handleiding de eerste of tweede methode zullen toepassen. Dit is handig omdat alle voorbeelden kleine zelfstandige stukjes HTML en CSS zijn en niet één grote dikke webpagina. Het is eenvoudigweg veel gemakkelijker om CSS properties op deze manier in te voeren en te bespreken dan iedere keer nieuwe aparte .css en HTML bestanden aan te maken. Je mag natuurlijk doen wat je wil, maar de derde aanpak is gewoonlijk veruit het best, behalve dan voor kleine voorbeelden zoals in deze handleiding.