Websites met stijl

14. CSS: kleur

In dit hoofdstuk

Plaats van stijlregels

In de vorige hoofdstukken heb je de webpagina's gmaakt. Met de html-tags heb je de structuur aangegegeven: een kop, een menu, een article.

Vanaf nu gaan we ons bezig houden met de vormgeving van al die elementen. Dat gebeurt met stijlregels. Stijlregels kunnen op 3 plaatsen staan:

  1. in een apart bestand, een stijlblad.
  2. Als stijlblok in de head van een html-element.
  3. Als inline stijl in de begin-tag van een element.

Stijlblad

Het stijlblad is een apart bestand met stijlregels. In elk html-document van de website staat een verwijzing naar dat bestand. Daardoor wordt de opmaak van de hele website bepaald door dat stijlblad.

Een stijlblad is daarom verreweg de meestgebruikte plaats voor stijlregels.

Stijlblok

Een enkele keer heeft (een deel van) één webpagina een afwijkende opmaak. Dan kunnen stijlregels voor die opmaak in een stijlblok in de head van dat ene document worden gezet, tussen de tags <style> en </style>

Inline stijl

Als één enkel element op één webpagina een afwijkende opmaak heeft kan de stijlregel voor dat element geplaatst worden in de begin-tag van dat element.

Opmerkingen

Terschelling.css aanmaken

In de webpagina's die je gemaakt hebt staat de verwijzing naar het stijlblad terschelling.css in de map css.
Dat stijlblad ga je nu aanmaken:

Experiment 1: alle tekst een kleurtje

Voordat we beginnen met de definitieve opmaak van de website, experimenteren we wat met enkele opmaakregels, om te zien hoe dat allemaal werkt. Als eerste experiment voorzien we de tekst van een kleurtje.

Bekijk de startpagina van de website van Terschelling nog eens in de browser.

Opmerking

Kijk bij de tips hoe je veranderingen die je aanbrengt in het stijlblad het best kunt bekijken.

Experiment 2: een achtergrondkleur aanbrengen

De vorm van een stijlregel

Bekijk nog eens de stijlregel van figuur 2: body {color: brown; background-color: tan;}

Afspraak:
Woorden die schuin gedrukt staan, zoals hierboven eigenschap en waarde, moeten niet letterlijk ingetikt.
Ze geven aan wat voor soort info je daar moet geven.

Experiment 3: Een aparte kleur voor de h1-koppen

Experimenteer gerust nog wat met dit stijlblad. Enkele kleurnamen zijn: aqua, black, blue, brown, cyan, gold, green, orange, red, steelblue, tan, yellow, white.

Opmerking

Oefening

Kleur

Kleurnamen

Er zijn verschillende manieren om in css kleuren te specificeren.

Je hebt al kennis gemaakt met kleurnamen. Deze methode is handig voor veelgebruikte kleuren als zwart, wit, rood, blauw (kleurnamen: black, white, red, blue).

Er zijn echter meer dan 16 miljoen kleurennuances waarvan er maar 140 een naam hebben. De methode is daardoor beperkt bruikbaar. (Zie www.w3schools.com/colors/colors_names.asp voor een overzicht van alle namen.)

Rood-Groen-Blauw

Enkele veelgebruikte methoden definiëren een kleur als een mengsel van rood, groen en blauw.

Deze methoden staan dicht bij de manier waarop kleuren op een TV of monitor worden getoond. Elk beeldpuntje (engels: pixel) bevat een rood, een groen en een blauw lampje waarvan de lichtsterkte kan worden aangepast. De lichtsterkte van elk van die lampjes bepaalt de helderheid en de kleur.

Nadeel van deze methoden is dat je uit de helderheid van rood, blauw en groen niet gemakkeijk de resulterende kleur kunt afleiden. Daarvoor is nogal wat ervaring nodig.
Ik zou bv.niet meteen zien dat 100% rood, 85% groen en 0% blauw goudgeel oplevert.
En als je een kleur een beetje wilt aanpassen door bijvoorbeeld wat meer of minder groen te nemen, dan veranderen de kleur, de helderheid en de verzadiging alle drie. (Verzadiging: Een verzadigde kleur is hard, een onverzadigde kleur zacht, pastel.)

Wil je zo'n methode gebruiken, kijk in de naslag kleur bij RGB kleuren of Hexadecimale kleuren.

HSL-kleuren

Het hierboven genoemde nadeel van de rood-groen-blauw methoden van kleurdefinitie is ondervangen in de nieuwe hsl-methode. Hierbij kun je afzonderlijk de kleur, verzadiging en helderheid instellen.

hsl staat voor hue (tint), saturation (verzadiging), lightness (helderheid)

Deze methode zullen we dan ook in de cursus gebruiken. Hieronder vind je alles wat je weten moet over hsl. Over andere kleurspecificatie methoden vind je meer in de css-naslag bij kleuren

Je geeft een kleur op als hsl(hue, saturation%, lightness%);.
Voorbeeld: in hsl(30, 100%, 50%) is de hue (tint) 30, saturation (verzadiging) 100% en lightness (helderheid) 50%.

Experiment 4

Hoe 'maak' je een kleur?

Voorbeeld: Je wilt voor de body als achtergrondkleur licht pastelgroen gebruiken; iets als       . Hoe krijg je dat voor elkaar?

Je zou het bijvoorbeeld als volgt kunnen aanpakken:

In de praktijk blijft uitzoeken van de kleuren die je wilt hebben best een klus. Soms is een tool daarbij handig, bijvoorbeeld de website colorizer.org/ of een tekenprogramma.

Over de oefening

Een stijlregel om hyperlinks rood te maken zou er uit kunnen zien als figuur 8:

figuur 8 a {color: red;}

Had jij dat ook? Goed zo!

Over experiment 4

Je stijlblad zou er bijvoorbeeld kunnen zien als in figuur 9:
(Maar andere kleurencombinaties zijn net zo goed)

figuur 9 body { color: hsl(40, 40%, 50%); background-color: hsl(50, 20%, 30%); }

h1 { color: hsl(40, 100%, 50%); background-color: hsl(40, 30%, 40%); }

a { color: hsl(140, 50%, 50%); background-color: hsl(140, 40%, 35%); }

Dat ziet er op de website dan ongeveer zó uit:

figuur 10

Terschelling

home polder duinen wad

Welkom op deze website over Terschelling

Langere declaraties

Bij langere css stijlregels is het overzichtelijker om deze over verschillende regels te verdelen:

Figuur 11 toont hoe het stijlblad van figuur 9 er dan komt uit te zien:

figuur 11 body { color: hsl(40, 40%, 50%);
background-color: hsl(50, 20%, 30%); }

h1 { color: hsl(40, 100%, 50%);
background-color: hsl(40, 30%, 40%); }

a { color: hsl(140, 50%, 50%);
background-color: hsl(140, 40%, 35%); }

Samenvatting

Voorgrondkleur

Achtergrondkleur

Kleur

(Zie de naslag kleur.)