CSS Kleuren
Je hebt met CSS meer mogelijkheden dan HTML om kleuren en achtergrondkleuren op je websites toe te passen. We zullen in deze tutorial de verschillende manieren beschrijven waarop kleuren gedefinieerd kunnen worden.
CSS Kleurnamen
In CSS kunnen kleuren gedefinieerd worden door middel van:
| Kleurnamen - zoals "red", "green", "blue", "transparent", enz. | |
| HEX-waarde - zoals "#ff0000", "#00ff00", enz. | |
| RGB-waarde - zoals "rgb(255, 0, 0)" |
Er worden 140 standaard kleurnamen ondersteund in CSS/HTML.
 |
Klik hier om een uitgebreide lijst met CSS/HTML kleurnamen te weergeven. |
CSS Tekstkleur
De color eigenschap definieert de tekstkleur (voorgrondkleur in het algemeen) van een element. De color eigenschap die is opgegeven in de body selector definieert bijvoorbeeld de standaard tekstkleur voor de hele pagina. Laten we het volgende voorbeeld proberen om te zien hoe het werkt:
Met inline CSS kan je de tekstkleur op de volgende manier veranderen:
Hallo allemaal,
tekstkleur is rood.
Hallo allemaal,
tekstkleur is groen.
CSS Achtergrondkleur
Met CSS kan je heel makkelijk de achtergrondkleur voor HTML-elementen instellen:
De eigenschap background-color beschrijft de achtergrondkleur van de elementen. Het element <body> bevat alle inhoud van een HTML document. Als je dus de achtergrondkleur van een hele pagina wilt wijzigen, moet de eigenschap background-color worden toegepast op het <body> element.
Je kunt ook achtergrondkleuren toepassen op andere elementen, zoals koppen en tekst. In het onderstaande voorbeeld worden verschillende achtergrondkleuren toegepast op <body> en <h2> elementen.
Voorbeeld:
body {
background-color: #FFCC66;
}
h2 {
color: #ff0000;
background-color: #C6A453;
}
 |
Kleuren kunnen worden ingevoerd als hexadecimale waarden zoals in het bovenstaande voorbeeld (#ff0000), of als kleurnamen red, green, yellow enz. je kunt ook rgb-waarden (rgb(255,0,0)) gebruiken. |
CSS Randkleur
De border eigenschap bepaalt de breedte, stijl en kleur van alle randen van een element. Je kunt met CSS op de volgende manier de randen van een element een kleur geven.
Voorbeeld:
<p style="border:3px solid red;">Hallo allemaal...</p>
<p style="border:3px solid purple;">Welkom op codecenter</p>
<p style="border:3px solid green;">CSS Tutorial</p>
HEX kleurcodering
Hex (afkorting van Hexadecimaal) is verreweg de meest gebruikte methode om de kleur te definiëren.Een hexadecimale kleurcode wordt bepaald doormiddel van 6 cijfers of letters. De eerste twee cijfers of letters vormen de rode waarde (RR), de volgende twee de groene waarde (GG), en de laatste twee de blauwe waarde (BB). Je kunt de hexadecimale kleurcode achterhalen door gebruik te maken van een grafische software zoals Adobe Photoshop, Paint of eventueel via onze online tools op deze pagina.
HEX:
RGB kleurcodering
Het RGB-kleurcodering is een manier om een kleur uit te drukken met behulp van een combinatie van de drie primaire kleuren rood, groen en blauw, vandaar de afkorting RGB. De waarden kunnen lopen van 0 tot 255. Een volledige kleur kan worden aangeduid als bijvoorbeeld rgb(181,34,34). Deze aanduidingen treft men meestal aan in grafische programma's zoals Adobe Photoshop.
|
|
|
Niet alle browsers ondersteunen het RGB-kleurcodering. We raden het ook niet aan om dit kleursysteem te gebruiken. |
