Hoe CSS toe te voegen
Wanneer een browser een stylesheet leest, zal deze het HTML-document opmaken volgens de informatie in de stylesheet.
Drie manieren om CSS in te voegen
Er zijn drie manieren om een stylesheet in te voegen:
- Externe CSS
- Interne CSS
- Inline CSS
Externe CSS
Met een externe stylesheet kun je het uiterlijk van een hele website veranderen door slechts één bestand te wijzigen!
Elke HTML-pagina moet een verwijzing bevatten naar het externe stijlbladbestand in het <link>-element, in de kopsectie.
Voorbeeld
Externe stijlen worden gedefinieerd in het <link>-element, in de <head>-sectie van een HTML-pagina:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Een externe stylesheet kan in elke teksteditor worden geschreven en moet worden opgeslagen met de extensie .css.
Het externe .css-bestand mag geen HTML-tags bevatten.
Zo ziet het bestand "mystyle.css" eruit:
"mijnstijl.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Opmerking: voeg geen spatie toe tussen de eigenschapswaarde en de eenheid:
Onjuist (spatie): margin-left: 20 px;
Juist (geen spatie):margin-left: 20px;
Interne CSS
Een interne stylesheet kan worden gebruikt als één enkele HTML-pagina een unieke stijl heeft.
De interne stijl wordt gedefinieerd in het <style>-element, in de kopsectie.
Voorbeeld
Interne stijlen worden gedefinieerd in het <style>-element, in de <head>-sectie van een HTML-pagina:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS
Een inline-stijl kan worden gebruikt om een unieke stijl voor een enkel element toe te passen.
Om inline stijlen te gebruiken, voegt u het stijlkenmerk toe aan het relevante element. Het stijlkenmerk kan elke CSS-eigenschap bevatten.
Voorbeeld
Inline stijlen worden gedefinieerd binnen het "style" attribuut van het relevante element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Tip: Een inline-stijl verliest veel van de voordelen van een stylesheet (door inhoud te vermengen met presentatie). Gebruik deze methode spaarzaam.
Meerdere stijlbladen
Als bepaalde eigenschappen zijn gedefinieerd voor dezelfde selector (element) in verschillende stylesheets, wordt de waarde uit het laatst gelezen stylesheet gebruikt.
Neem aan dat een externe stylesheet de volgende stijl heeft voor het <h1> element:
h1
{
color: navy;
}Ga er dan vanuit dat een intern stylesheet ook de volgende stijl heeft voor het <h1> element:
h1
{
color: orange;
}Voorbeeld
Als de interne stijl is gedefinieerd na de link naar de externe stylesheet, zullen de <h1>-elementen "oranje" zijn:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Voorbeeld
Als de interne stijl echter is gedefinieerd vóór de link naar de externe stylesheet, zullen de <h1>-elementen "navy" zijn:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Trapsgewijze volgorde
Welke stijl wordt gebruikt als er meer dan één stijl is opgegeven voor een HTML-element?
Alle stijlen op een pagina "cascade" in een nieuwe "virtuele" stylesheet volgens de volgende regels, waarbij nummer één de hoogste prioriteit heeft:
- Inline-stijl (binnen een HTML-element)
- Externe en interne stylesheets (in de kopsectie)
- Browser standaard
Een inline-stijl heeft dus de hoogste prioriteit en heeft voorrang op externe en interne stijlen en standaardinstellingen van de browser.
Ooit gehoord van W3Schools Spaces ? Hier kunt u gratis uw eigen website maken of codefragmenten opslaan voor later gebruik.
Ga gratis aan de slag* geen kredietkaart nodig