Cascading Style Sheets/Kleur

In CSS zijn er verschillende proporties of eigenschappen die als waarde kleur hebben. De meeste gekende zijn color en background-color die respectievelijk de kleur van de tekst en achtergrond bepalen. Je kunt ze 3 verschillende soorten waarden meegeven. Ofwel de naam van een kleur, een RGB waarde of een waarde in hexadecimaal.

Namen

Je kunt als waarde een naam van een kleur geven. Die moeten in het Engels geschreven zijn en je kunt voorlopig tussen 16 kiezen.

• aqua
• black
• blue
• fuchsia
• gray
• green
• lime
• maroon
• navy
• olive
• purple
• red
• silver
• teal
• yellow
• white

Als voorbeeld het volgende:

CSS-code: Voorbeeld van kleuren via namen

p        {
         color: yellow;
         background-color: red;
         }

Geeft als resultaat

Dit is gele tekst met rode achtergrond.

Het probleem met het gebruik van namen is dat de tint van een kleur niet bij alle browsers hetzelfde is. Groen kan bij de ene browser donkerder zijn dan bij een ander. Wil je kleuren met een specifieke tint gebruiken gebruik liever RGB of hexadecimale waardes.

rgb

rgb is de afkorting voor rood, groen en blauw. Door deze 3 kleuren te combineren kun je alle mogelijke kleuren verkrijgen. De algemene notatie is: Als voorbeeld het volgende:

CSS-code: Algemene notatie van rgb

color: rgb(rood, groen, blauw);

Op de plaats van de woorden rood, groen en blauw kun je bepalen hoe sterk ieder kleur moet zijn. Als waarde heb je twee mogelijkheden. Ofwel bepaal je de sterkte van de kleur door een getal van 0 tot 255.

CSS-code: Voorbeeld van kleur via rgb

p        {
         color: rgb(255, 215, 0);
         }

Deze tekst staat in het goud.

Je kunt ook met percentages bepalen hoe sterk ieder kleur moet zijn.

CSS-code: Voorbeeld van kleur via rgb

p        {
         color: rgb(100%, 84%, 0%);
         }

Deze tekst staat ook in het goud.

Hexadecimaal

Een andere veelgebruikte manier om kleuren te definiëren is via een Hexadecimaal. Dit is een code van zes tekens bestaand uit letters en cijfers, voor deze code staat een hekje.

CSS-code: Voorbeeld van een Hexadecimale kleurcode

p        {
         color: #FFFFFF;
         background-color: #000000;
         }

Deze code zorgt ervoor dat de tekst er zo eruit gaat zien.

Andere proporties die kleuren gebruiken

Naast color en background-color zijn er nog andere properties die kleur als waarde hebben:

• border-bottom-color
• border-color
• border-left-color
• border-right-color
• border-top-color
• outline-color