Om een html pagina qua uiterlijk aan te passen is CSS een belangrijke code. Met CSS kan je bijvoorbeeld aangeven welke kleur de achtergrond moet zijn, welk formaat een afbeelding aan mag nemen of de plaats van een stukje tekst.
In grote lijnen zijn er 3 manieren om CSS toe te passen.
Een inline-stijl kan worden gebruikt om een unieke stijl voor een enkel element toe te passen. Om inline stijlen te gebruiken, voegt je het stijlattribuut toe aan het relevante element. De style attribuut kan elke CSS-eigenschap bevatten.
Zo'n inline CSS kan handig zijn indien je slechts 1 stukje van een CSS-eigenschap wilt voorzien.
Interne CSS:
Een interne CSS plaats je tussen het
Om bovenstaand voorbeeld met de rode tekst aan te houden kan het volgende worden toegepast:
Het nadeel ban deze code is dat elke tekst tussen
Nu kunnen we het CSS deel verder uitbreiden:
Externe CSS:
Bij een externe CSS staat de CSS code in een eigen bestand. In de HTML staat dan de verwijzing naar de CSS.
We gaan er vanuit dat de HTML en de CSS in dezelfde map staan, de HTML op
In dat geval ziet de HTML er zo uit:
En zo ziet de CSS er dan uit:
In grote lijnen zijn er 3 manieren om CSS toe te passen.
- inline CSS
- interne CSS
- externe CSS
Een inline-stijl kan worden gebruikt om een unieke stijl voor een enkel element toe te passen. Om inline stijlen te gebruiken, voegt je het stijlattribuut toe aan het relevante element. De style attribuut kan elke CSS-eigenschap bevatten.
HTML:
<p style="color:red;">Deze tekst heeft een rode kleur.</p>Zo'n inline CSS kan handig zijn indien je slechts 1 stukje van een CSS-eigenschap wilt voorzien.
Interne CSS:
Een interne CSS plaats je tussen het
<head> en </head> gedeelte in de HTML. De CSS codes horen tussen de <style> en </style> tags te staan.Om bovenstaand voorbeeld met de rode tekst aan te houden kan het volgende worden toegepast:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>Deze tekst heeft een rode kleur.</p>
</body>
</html>Het nadeel ban deze code is dat elke tekst tussen
<p> en </p> in een rode kleur weergegeven zal worden. Om dit te voorkomen kan een class aangemaakt worden. In dat geval zal de tekst alleen rood gekleurd zijn indien deze de juiste class waarde bezit.
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.rood {
color: red;
}
</style>
</head>
<body>
<p class="rood">Deze tekst heeft een rode kleur.</p>
<p>Deze tekst heeft geen rode kleur.</p>
</body>
</html>Nu kunnen we het CSS deel verder uitbreiden:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: yellow;
}
.rood {
color: red;
}
.groen {
color: green;
}
.blauw {
color: blue;
}
</style>
</head>
<body>
<p>De achtergrond heeft een gele kleur</p>
<p class="rood">Deze tekst heeft een rode kleur.</p>
<p class="groen">Deze tekst heeft een groene kleur.</p>
<p class="blauw">Deze tekst heeft een blauwe kleur.</p>
</body>
</html>Externe CSS:
Bij een externe CSS staat de CSS code in een eigen bestand. In de HTML staat dan de verwijzing naar de CSS.
We gaan er vanuit dat de HTML en de CSS in dezelfde map staan, de HTML op
index.html en de CSS op style.css.In dat geval ziet de HTML er zo uit:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>De achtergrond heeft een gele kleur</p>
<p class="rood">Deze tekst heeft een rode kleur.</p>
<p class="groen">Deze tekst heeft een groene kleur.</p>
<p class="blauw">Deze tekst heeft een blauwe kleur.</p>
</body>
</html>En zo ziet de CSS er dan uit:
CSS:
body {
background-color: yellow;
}
.rood {
color: red;
}
.groen {
color: green;
}
.blauw {
color: blue;
}
Laatst bewerkt:
