CSS: selectors en kleuren

HTML zegt wat iets is; CSS (Cascading Style Sheets) zegt hoe het eruitziet. Kleuren, lettertypen, ruimte, layout: dat is allemaal CSS. Omdat HTML en CSS gescheiden zijn, kun je met één stylesheet de stijl van een hele site veranderen, zonder één HTML-bestand aan te raken.

In deze les koppel je een stylesheet aan je visitekaartje uit les 2, leer je de belangrijkste selectors en geef je je pagina een kleurenschema met goed contrast.

Een stylesheet koppelen

Maak naast index.html een bestand style.css en koppel het in de <head>:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sam de Vries · visitekaartje</title>
  <link rel="stylesheet" href="style.css">
</head>

Zet in style.css:

body {
  background-color: #fdf6ec;
  color: #2b2b2b;
  font-family: system-ui, sans-serif;
}

h1 {
  color: #b5462f;
}

Ververs de pagina: de achtergrond is crème, de kop roodbruin.

Je kunt CSS ook in een <style>-blok in de head zetten, of in een style="..."-attribuut op een element. Doe dat alleen voor snelle tests. Een apart bestand kun je voor alle pagina's gebruiken, en de browser hoeft het maar één keer te downloaden.

Een CSS-regel

selector    declaratieblok
   │     ┌───────┴────────┐
   h1    {  color: #b5462f;  }
            └─┬─┘  └──┬──┘
          eigenschap waarde
            └─── declaratie ───┘

• De selector zegt welke elementen je stijlt.
• Tussen { } staan declaraties: eigenschap: waarde;.
• Elke declaratie eindigt met een puntkomma.
• Commentaar schrijf je als /* ... */.

Selectors

Klassen

Een klasse is een label dat je zelf verzint en op zoveel elementen zet als je wilt:

<p class="intro">Student HBO-ICT.</p>
<p class="opvallend">Op zoek naar een stage!</p>
<p class="intro opvallend">Beide klassen tegelijk.</p>

.intro {
  font-size: 1.25rem;
}

.opvallend {
  background-color: #ffe8a3;
}

Een element kan meerdere klassen hebben, gescheiden door spaties. Kies namen die zeggen wat iets is (.waarschuwing, .prijs), niet hoe het eruitziet (.geel, .groot); anders klopt de naam niet meer als je de kleur verandert.

Waarom liever klassen dan id's

Een id mag maar één keer op een pagina voorkomen, en weegt in CSS zwaarder dan een klasse (dat zie je in les 7). Gebruik id voor ankerlinks en formulierlabels; gebruik voor opmaak klassen.

Kleuren

CSS kent verschillende schrijfwijzen voor dezelfde kleur:

.a { color: tomato; }                  /* naam */
.b { color: #ff6347; }                 /* hex: rood, groen, blauw van 00 tot ff */
.c { color: rgb(255 99 71); }          /* rgb: 0–255 per kanaal */
.d { color: hsl(9 100% 64%); }         /* hsl: tint, verzadiging, lichtheid */
.e { color: rgb(255 99 71 / 50%); }    /* half doorzichtig */

hsl werkt zoals mensen over kleur denken. De tint is een hoek op de kleurencirkel (0 = rood, 120 = groen, 240 = blauw), verzadiging is hoe fel, lichtheid hoe licht. Een lichtere versie van dezelfde kleur? Verhoog alleen de lichtheid:

.knop        { background-color: hsl(9 70% 45%); }
.knop:hover  { background-color: hsl(9 70% 55%); }

(:hover is een pseudo-klasse: "als de muis erboven is". Meer daarover in les 21.)

De komma-schrijfwijze rgb(255, 99, 71) zie je ook veel; die werkt nog steeds.

Contrast

Lichtgrijze tekst op een witte achtergrond ziet er strak uit, en is voor veel mensen onleesbaar: in de zon op een telefoon, met een minder goed oog, of op een slecht scherm.

De richtlijn (WCAG, les 15) vraagt een contrastverhouding van minstens:

• 4,5 : 1 voor gewone tekst;
• 3 : 1 voor grote tekst (vanaf ongeveer 24 px, of 19 px vet).

Je hoeft dat niet uit te rekenen. Klik in de devtools (F12) op een element, dan op het kleurvakje bij color: Chrome en Firefox tonen de contrastverhouding met een vinkje of kruisje. Online kan het ook, bijvoorbeeld met de WebAIM Contrast Checker.

Uitgewerkt voorbeeld: het visitekaartje in kleur

<body>
  <main class="kaartje">
    <h1>Sam de Vries</h1>
    <p class="functie">Student HBO-ICT · webontwikkeling</p>
    <p>E-mail: <a href="mailto:sam@example.nl">sam@example.nl</a></p>
    <p class="opvallend">Op zoek naar een stageplek vanaf februari.</p>
  </main>
</body>

body {
  background-color: hsl(36 80% 96%);
  color: hsl(0 0% 17%);
  font-family: system-ui, sans-serif;
}

h1 {
  color: hsl(9 59% 45%);
}

.functie {
  color: hsl(0 0% 35%);
}

a {
  color: hsl(210 70% 35%);
}

.opvallend {
  background-color: hsl(45 100% 82%);
}

Voorspel: welke kleur heeft de link? Donkerblauw, want de regel a geldt voor alle links. De kleur van body erft hij niet, want browsers geven links hun eigen standaardkleur. Waarom sommige eigenschappen wel worden overgeërfd en andere niet, zie je in de volgende les.

Typische fouten

Oefeningen

Oefening 1. Schrijf CSS die alle links in de <nav> wit maakt, en alle andere links blauw.

a {
  color: hsl(210 70% 35%);
}

nav a {
  color: white;
}

Oefening 2. Schrijf #336699 als rgb().

Oefening 3. Maak met hsl een knop met achtergrond in tint 150 (groen), en een donkerdere versie voor :hover.

.knop {
  background-color: hsl(150 60% 40%);
  color: white;
}

.knop:hover {
  background-color: hsl(150 60% 30%);
}

Lab: visitekaartje een kleurenschema geven

Samenvatting

• CSS in een apart bestand, gekoppeld met <link rel="stylesheet" href="...">.
• Regel = selector + { eigenschap: waarde; }.
• Selectors: type p, klasse .prijs, id #contact, afstammeling nav a, groep h1, h2.
• Gebruik klassen voor opmaak, met namen die zeggen wat iets is.
• Kleuren in naam, hex, rgb() of hsl(); controleer contrast (4,5 : 1).

Volgende les: wat er gebeurt als twee regels hetzelfde element stylen.