CSS Koppelen
Stijlen kunnen op 3 verschillende manieren aan HTML gekoppeld worden:Via een inline stijl of intern met behulp van een stijlblok in de head van het document of een extern stijlblad.
| Inline - met behulp van een stijl attribuut in HTML-elementen. | |
| Intern - met behulp van een <style> element in de head van het document. | |
| Extern - met behulp van één of meer externe CSS-bestanden. |
Inline CSS stijlen
Inline CSS heeft de hoogste prioriteit van de drie manieren waarop je CSS kunt gebruiken: inline, intern, en extern. Dit betekent dat je de stijlen die zijn gedefinieerd in de interne of externe door inline CSS kan overschrijven. Inline stijl is handig voor het aanbrengen van een unieke stijl naar een enkel HTML-element.Inline stijl maakt gebruik van het attribuut style=" "
Voorbeeld:
<p style="background: blue; color: white;">
Een nieuwe achtergrond en lettertype kleur met inline CSS.</p>
Interne CSS stijlen
Een interne style sheet kan worden gebruikt om een gemeenschappelijke stijl voor alle HTML elementen op een pagina te maken. Bij het gebruik van interne CSS, moet je een nieuwe tag, <style> toevoegen, in de head van het document. De onderstaande HTML code bevat een voorbeeld hoe je gebruik maakt van de tag <style>.
Voorbeeld:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:black;}
h1 {color:yellow;}
p {color:white;}
</style>
</head>
<body>
<h1>Interne CSS voorbeeld:</h1>
<p>Witte tekst op een zwarte achtergrond!</p>
</body>
</html>
Externe CSS stijlen
Bij het gebruik van CSS is het beter om de CSS-code gescheiden te houden van je HTML-documenten. Externe CSS is een bestand dat alleen CSS-code bevat en wordt opgeslagen met een ".css" bestandsextensie. Deze CSS-bestand wordt dan geladen in je HTML-documenten met behulp van het element <link> in plaats van het attribuut <style>.Externe style sheets zijn ideaal wanneer de stijl wordt toegepast op meerdere pagina's. Met externe style sheets, kan je het uiterlijk van een hele site veranderen door alleen de inhoud van het CSS bestand te wijzigen.
Aan de slag met externe CSS
Laten we beginnen met het maken van een externe CSS-bestand. Open notepad.exe (kladblok), of een andere teksteditor en neem de volgende CSS-code over:
body {background-color:blue}
h1 {color:yellow}
p {color:white}
Sla het bestand op als een CSS-bestand (.css) Zorg ervoor dat je het niet opslaat als een tekstbestand (.txt), geef het bestand de naam "styles.css" (zonder aanhalingstekens). Maak nu een nieuw HTML-bestand en neem de onderstaande HTML-code over:
<html>
<head>
<link rel="stylesheet" href="styles.css">>
</head>
<body>
<h1>Externe CSS voorbeeld:</h1>
<p>Witte tekst op een blauwe achtergrond!</p>
</body>
</html>
Sla dit bestand op als "index.html" (zonder aanhalingstekens) in dezelfde map als het CSS-bestand. Open nu het HTML-bestand in je webbrowser en het moet er dan ongeveer als volgt uitzien:
Gefeliciteerd! Je hebt je eerste pagina gemaakt door gebruik te maken van externe style sheets! Je kunt nu heel eenvoudig de CSS van je HTML-document bewerken door het bestand "styles.css" te openen in een teksteditor.
| Voor degenen die de bovenstaande code niet willen overnemen kunnen direct het resultaat bekijken door op het voorbeeld link hiernaast te klikken: |
| Voorbeeld |
 |
Wanneer een browser een stijlblad leest, zal hij het HTML-document opmaken volgens de informatie in het stijlblad. |
