Kleuren
4.1 Kleuren in CSS
Kleuren in CSS worden meestal bepaald door:
- een geldige CSS-kleurnaam - zoals “red”
- een RGB-waarde - zoals “rgb (255, 0, 0)”
- een HEX waarde - zoals “#ff0000”
4.1.1 CSS kleurnamen
CSS kleurnamen zijn niet hoofdlettergevoelig: “Red” is hetzelfde als “red” of “RED”.
CSS ondersteunt 140 standaard kleurnamen.
Enkele voorbeelden:
| Kleur | CSS-kleurnaam |
| Red | |
| Green | |
| Blue | |
| Orange | |
| Yellow | |
| Cyan | |
| Black |
4.1.2 RGB-waardes
RGB-waardes worden samengesteld met behulp van deze formule:
_RGB (rood, groen, blauw);
_Elke parameter (rood, groen, blauw) bepaald de intensiteit van de kleur met een waarde tussen 0 en 255.
Bijvoorbeeld, RGB (255,0,0) is helder rood, omdat de roodwaarde de hoogste waarde (255) heeft en de andere kleuren de waarde 0 krijgen. Met de colorpicker van Google kan je hier zelf mee experimenteren.
Enkele voorbeelden van RGB-waardes:
| Color | RGB |
| rgb(255,0,0) | |
| rgb(0,255,0) | |
| rgb(0,0,255) | |
| rgb(255,165,0) | |
| rgb(255,255,0) | |
| rgb(0,255,255) |
4.1.3 Hexadecimale waardes
Kleuren kunnen ook worden samengesteld met behulp van hexadecimale kleurwaarden in de vorm: #RRGGBB, waarbij RR (rood), GG (groen) en BB (blauw) hexadecimale waardes zijn tussen 00 en FF (hetzelfde als de decimale waardes 0-255).
Zo wordt met #FF0000 rood weergegeven, omdat rood is ingesteld op de hoogste waarde (FF) en anderen zijn ingesteld op de laagste waarde (00).
HEX-waarden zijn niet hoofdlettergevoelig: #ff0000 is hetzelfde als #FF0000.
Enkele voorbeelden van HEX-waardes:
| Color | HEX |
| #FF0000 | |
| #00FF00 | |
| #0000FF | |
| #FFA500 | |
| #FFFF00 | |
| #00FFFF |
5 CODE: COLOR PROPERTIES
In deze CODE hoofdstukken worden enkele belangrijke CSS stijlregels aangeleerd die je zeker nodig zult hebben.
5.1 Overzicht
| property | code | uitleg |
|---|---|---|
| De color property | color: red;
|
De color property zorgt voor de tekstkleur in een element. De mogelijke waardes zijn:
|
| De background-color property | background-color: green;
|
De background-color property zorgt voor achtergrondkleur in een element. De mogelijke waardes zijn:
|