Labo 3: CSS

Labo 1 en 2 was om je groot individueel project op te zetten: je portfolio.
Vanaf nu is een labo een apart oefenproject binnen dat project.

Je werkt in een nieuw bestand: projecten/labo03/oplossing/index.html, je experimenteert daar vrij, en wat werkt neem je daarna zelf over in je portfolio.

Werk door tot waar je raakt, en maak de rest thuis af tegen zondag.

gitlab

Maak regelmatige commits met een duidelijke commit message.
Tip: na elke oefening of stap!

Vraag hulp aan je labodocent, zorg dat je dit kan!

Doelstellingen

Na dit labo kan je:

• een stylesheet aan je pagina koppelen, met normalize ervoor CORE_3.1
• kleuren kiezen in oklch() en het contrast ervan controleren CORE_4.1 CORE_7.1
• element-, class-, id- en attribute-selectors gebruiken en je keuze verantwoorden CORE_3.2
• in de devtools aflezen welke regel wint en waarom CORE_3.10
• uitleggen welke properties overerven en hoe je dat gebruikt CORE_3.4
• een lettertype zelf hosten met @font-face, met een fallback CORE_4.3
• uitleggen waarom je een font niet bij Google ophaalt CORE_4.3

Voorbereiding

Maak in je portfolio de map projecten/labo03/oplossing/ met daarin index.html en styles.css.

In index.html zet je de startcode hieronder. Die HTML pas je niet aan, behalve op de plaatsen waar het expliciet gevraagd wordt: je naam, je afbeeldingen, en de paden in je navigatie.

Die pagina is tegelijk je opgave en je oefenterrein: de tekst die je gaat opmaken, is de tekst van dit labo.

Startcode voor index.html

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Labo 3: CSS | Portfolio</title>
</head>
<body>

<header>
    <a href="../../../" class="sitenaam">Voornaam Naam</a>
    <nav>
        <ul>
            <li><a href="../../../">Home</a></li>
            <li><a href="../../">Projecten</a></li>
            <li><a href="../">Labo 3</a></li>
        </ul>
    </nav>
</header>

<main>
    <h1>Labo 3: CSS</h1>

    <p id="intro">
        Deze pagina is je oefenterrein. Alles wat je hieronder leest, ga je ook opmaken.
        Werk van boven naar onder en lees eerst wat er staat.
    </p>

    <section>
        <h2>Koppelen</h2>
        <p>
            Een stylesheet hang je aan je pagina met een <code>link</code>-tag in de
            <code>head</code>. Normalize komt eerst, je eigen bestand daarna.
        </p>
        <p class="waarschuwing">
            Draai je die twee om, dan wint normalize van jou en vraag je je een half uur af
            waarom er niets verandert.
        </p>
    </section>

    <section>
        <h2>Kleur</h2>
        <p>
            Kleuren schrijf je in <code>oklch()</code>. De lightness is daar voorspelbaar, en
            dus kan je er over contrast mee redeneren.
        </p>
        <figure>
            <blockquote lang="en">
                <p>
                    When approaching which markup to use, ask yourself, what elements best
                    describe the data that I am going to populate?
                </p>
            </blockquote>
            <figcaption>MDN web docs</figcaption>
        </figure>
        <p class="waarschuwing">
            Een kleurencombinatie met te weinig contrast is niet lelijk, ze is onleesbaar!
            Controleer ze.
        </p>
    </section>

    <section>
        <h2>Selectors</h2>
        <ul>
            <li>de <strong>element</strong> selector, op tag name</li>
            <li>de <strong>class</strong> selector, met een punt</li>
            <li>de <strong>id</strong> selector, met een hekje</li>
            <li>de <strong>attribute</strong> selector, tussen vierkante haken</li>
        </ul>
        <p>
            Vervang hieronder de twee paden door afbeeldingen uit je eigen
            <code>images</code>-map. Let op je relatieve pad, je zit drie mappen diep.
            De tweede afbeelding is decoratief en houdt dus een lege <code>alt</code>.
        </p>
        <img src="../../../images/VERVANG-MIJ.jpg" alt="Beschrijf hier wat er te zien is">
        <img src="../../../images/VERVANG-MIJ-OOK.jpg" alt="">
    </section>

    <section>
        <h2>Cascade</h2>
        <p>
            Twee regels die hetzelfde zeggen over hetzelfde element: de sterkste wint, en bij
            gelijke sterkte de laatste.
        </p>
        <p class="waarschuwing">
            Werkt een regel niet? Open de devtools en kijk!.
        </p>
    </section>

    <section>
        <h2>Fonts</h2>
        <p>
            Een lettertype dat je bij Google ophaalt, stuurt het IP-adres van je bezoeker mee.
            Daarom host je het zelf, met <code>@font-face</code>.
        </p>
        <p>En je voorziet altijd een fallback.</p>
    </section>
</main>

<footer>
    <p>Voornaam Naam, 2026</p>
    <p>Web Fundamentals, Odisee</p>
</footer>

</body>
</html>

De oefeningen hieronder staan grotendeels los van elkaar. Loop je ergens vast, sla dan over en kom later terug.

📝 Voor je verslag

Een paar oefeningen stellen je een vraag. Die zijn gemarkeerd met 📝.

Je antwoord daarop hoort niet in je CSS en ook niet op een los blaadje, maar in je labo-verslag: dat is de pagina projecten/labo03/index.html in je portfolio, dezelfde die je voor labo 1 en 2 ook gemaakt hebt.

Hou de antwoorden tijdens het labo ergens bij, en werk ze thuis uit. Onderaan deze pagina staat wat er verder nog in je verslag hoort.

Of vraag hulp aan je docent!

Kan natuurlijk ook 😉

koppel stijl en html

Voeg in de head twee link-tags toe: eerst normalize, dan je eigen styles.css.

<link rel="stylesheet" href="https://unpkg.com/@csstools/normalize.css">
<link rel="stylesheet" href="styles.css">

Schrijf in styles.css één regel die zichtbaar iets doet, bijvoorbeeld alle paragrafen een kleur geven. Zo weet je meteen of de koppeling werkt!

Controlepunt 1

Open de devtools. Zie je in het styles panel regels staan die uit jouw styles.css komen, en staat normalize daarboven? Toon het aan je labodocent.

De vaste start

Zet bovenaan je stylesheet:

:root {
    line-height: 1.6;
}

body {
    margin: 0;
}

Kijk wat die tweede regel doet. De witte rand rond je pagina verdwijnt: dat was een marge die de browser er standaard op zet.

Volgende week

Hier komen nog twee regels bij, box-sizing en een .container. Die hebben het box model nodig en dat zie je volgende week. Verzin ze dus nog niet zelf.

Voorlopig plakt je tekst dus nog tegen de kant van het scherm... en dat is ... 'ok'.
Volgende week lossen we dat op!

Kleuren

Oefening 1: oklch kleuren

Ga naar oklch.com en kies twee kleuren: één voor de achtergrond van je pagina en één voor je tekst. Zet ze op :root.

:root {
    color: oklch(...);
    background-color: oklch(...);
}

Let op het eerste getal, de lightness. Staat je achtergrond op 0.99 en je tekst op 0.25, dan zit je goed. Liggen ze dicht bij elkaar, dan ga je dat in de volgende oefening weten.

Kies een derde kleur als accent: dezelfde hue als je tekstkleur, maar een andere lightness en een hogere chroma. Zet ze nog even in een commentaar, je gebruikt ze in oefening 7.

Zo bouw je een palet uit één kleur (monochroom), in plaats van drie kleuren te zoeken die bij elkaar passen.

Oefening 2: contrast controleren

Scan je pagina met axe DevTools.

Krijg je een melding over contrast, ga dan terug naar oklch.com en schuif je lightnesswaarden verder uit elkaar tot de melding weg is.

📝 Voor je verslag

Welke twee lightnesswaarden volstonden uiteindelijk?

Dura lex sed lex

De wet is hard, maar het is de wet.

Contrast is een van de meest voorkomende toegankelijkheidsproblemen op het web, en het kost je 10 seconden om het op te lossen...

Je pagina is niet in orde zolang je contrast niet goed is!

Oefening 3: van hex naar oklch

Deze kleur komt uit een bestaand design:

#3a7bd5

Zet ze op oklch.com om naar oklch().

📝 Voor je verslag

Wat zijn de drie oklch-waarden? Is dit een lichte of een donkere kleur, en kan je er witte tekst op zetten?

Het punt van deze oefening is niet de omzetting. Het is dat je aan #3a7bd5 niet kan zien wat het antwoord is, en aan de oklch-waarden wel.

💡

Verwacht je dus aan dezelfde vraag op een test.
Gegeven deze kleur in oklch, is dit een... ?

Selectors

Oefening 4: element selectors

Geef je tekst wat vorm, alleen met element selectors:

• de h1 en de h2's een andere kleur dan je lopende tekst
• de code-elementen een eigen achtergrondkleur
• de figcaption een andere kleur dan de rest

Probeer daarna deze twee, nog altijd alleen met element selectors:

• geef alleen de drie waarschuwingen een opvallende achtergrondkleur
• geef alleen de inleidende paragraaf een andere tekstkleur

Dat lukt niet. Je kan wel p selecteren, maar dan pak je elke paragraaf op de pagina. Er bestaat geen tag name die alleen die drie aanduidt, of alleen die ene.

Daar zijn classes en id's voor, en dat zijn de volgende twee oefeningen.

Oefening 5: class selectors

In de HTML staan twee classes: sitenaam en waarschuwing.

Geef .waarschuwing een opvallende achtergrondkleur, en gebruik daarvoor je accentkleur als je die in oefening 1 gekozen hebt. Geef .sitenaam een eigen kleur.

Meerdere classes

Voeg in je HTML aan één van de drie .waarschuwing-paragrafen een tweede class toe, bijvoorbeeld belangrijk. Schrijf daar een regel voor die alleen de tekstkleur overschrijft.

Dat element heeft nu twee classes die allebei iets zeggen over dezelfde property. Welke wint, en waarom? Controleer het in de devtools.

📝 Voor je verslag: welke van de twee classes wint, en waarom?

Oefening 6: id selector

De inleidende paragraaf heeft id="intro". Maak hem vetter met font-weight.

Specificity

Schrijf daarna een regel met p als selector die de font-weight terug normal maakt, en zet ze onder je id-regel. Er gebeurt niets.

Dat is precies de reden dat je id-selectors zelden gebruikt.

📝 Voor je verslag: waarom doet die p-regel niets, en wat had je moeten schrijven om die font-weight wél te overschrijven?

Oefening 7: attribute selector

In de pagina staat een blockquote met lang="en", want dat citaat is Engels. Pak dat element met een attribute selector en maak het cursief.

[lang="en"] {
    font-style: italic;
}

Je hebt daar geen class voor nodig: de informatie stond al in je HTML. Dat is het hele punt.

Decoratieve afbeeldingen

Er staan twee afbeeldingen op de pagina. De tweede heeft een lege alt, want ze is decoratief.

Schrijf een selector die alleen die decoratieve afbeelding pakt en geef ze een rand. Zo zie je in één oogopslag welke afbeeldingen op een pagina als decoratief gemarkeerd staan. Doe die controle daarna ook eens op je eigen portfolio.

💡 uitbreiding

Bovenstaande tip is eigenlijk vooral praktisch om te controleren welke afbeelding GEEN alt attribuut heeft. Dat kan met ":not()".

Probeer, experimenteer, ontdek...
Doe meer dan verwacht wordt 😉

inheritance

Oefening 8: align tekst

Zet op :root tijdelijk text-align: center.

Kijk wat er allemaal mee verandert zonder dat je het gevraagd hebt, en zet het daarna weer weg. Probeer hetzelfde met background-color: verandert er dan evenveel mee?

Wat je zou moeten zien

text-align erft over, dus alles in je pagina schuift mee naar het midden.

background-color erft niet over. Het lijkt wel zo, omdat elementen standaard doorzichtig zijn en je dus de achtergrond van :root ziet. In de devtools zie je dat een p zelf geen achtergrondkleur heeft.

Dat verschil komt volgende week bij het box model terug.

Debuggen

Oefening 9: conflicten

Maak een bestand conflicten.css en koppel het na je styles.css. Zet er dit in:

/* A */
figcaption {
    color: green;
}

figcaption {
    color: black;
}

/* B */
p {
    color: green;
}

#intro {
    color: black;
}

/* C */
waarschuwing {
    background-color: green;
}

/* D */
:root {
    color: green;
}

li {
    color: black;
}

Er staat vier keer een groene regel in, en vier keer doet ze niet wat je zou verwachten. Zoek per geval uit waarom, met de devtools erbij.

• A: waarom is de figcaption niet groen?
• B: waarom is de inleidende paragraaf niet groen, terwijl de andere paragrafen dat wel zijn?
• C: waarom gebeurt er helemaal niets met de waarschuwingen?
• D: waarom zijn de lijstitems niet groen, terwijl de koppen dat wel zijn?

📝 Voor je verslag: je vier antwoorden, met per geval het mechanisme dat erachter zit.

Je hoeft niets op te lossen. Verwijder conflicten.css weer als je klaar bent.

💡

Dezelfde oefening staat ook als playground bij de theorie, met vier andere gevallen erin. Doe die ook, zonder eerst het antwoord open te klappen.

Zo'n oefening komt vast nóg eens terug.

Fonts - lettertypes

Oefening 10: een font downloaden

Ga naar Google Fonts en download Fredoka. Je krijgt een zip met:

• een map static met losse bestanden per gewicht
• een bestand Fredoka-VariableFont_wdth,wght.ttf, een variable font
• README.txt
• OFL.txt, de licentie

Open OFL.txt en lees wat je met dit lettertype mag doen. Dat is geen formaliteit: je zet het straks op een publieke server.

📝 Voor je verslag

Wat laat de licentie van Fredoka toe, in één zin?

Variable fonts werken in alle courante browsers, dus de map static mag je negeren.

Oefening 11: converteren en registreren

Een .ttf werkt in de browser, maar is zwaar. Zet het om naar .woff2 op cloudconvert.com/ttf-to-woff2. Je gaat van ongeveer 155 kB naar ongeveer 84 kB.

Zet het .woff2-bestand in een map fonts in je oefenproject en registreer het bovenaan je stylesheet:

@font-face {
    font-family: "Fredoka";
    src: url("./fonts/Fredoka-VariableFont_wdth,wght.woff2") format("woff2");
}

:root {
    font-family: "Fredoka", sans-serif;
}

Controleer je pad. Werkt het niet, dan is dat in negen van de tien gevallen het probleem.

Controlepunt 2

Open het tabblad Network in je devtools en herlaad de pagina. Je ziet je .woff2 binnenkomen vanaf je eigen project, en er staat geen enkel verzoek naar fonts.googleapis.com of fonts.gstatic.com in de lijst.

Toon dat aan je labodocent.

Oefening 12: de fallback testen

Verander in je @font-face tijdelijk het pad naar iets dat niet bestaat, en herlaad.

Je pagina blijft leesbaar, want je hebt een fallback. Haal daarna ook de sans-serif weg en herlaad opnieuw: nu krijg je de default van je besturingssysteem, en dat is zelden wat je voor ogen had.

Zet alles weer goed.

Valideren en Indienen

Alles staat online tegen zondag om 20u, op je eigen adres. En in je GitLab-project, met commits onderweg en niet één op het einde.

Verslag

Schrijf op projecten/labo03/index.html je verslag, in de vaste opbouw: doelen, link naar je oplossing, omschrijving, gerelateerde links, reflectie, de antwoorden op elke vraag die in dit labo met 📝 gemarkeerd staat...

Valideren

Controleer je oefenpagina:

1. W3C Markup Validation Service: nul errors
2. axe DevTools: geen meldingen
3. Zet je project online en valideer opnieuw via je URL

Als er iets misgaat

Mijn stylesheet doet niets. Kijk naar het pad in je href. Zie je in de devtools, tabblad Network, een 404 voor styles.css, dan heb je het gevonden.

Mijn font laadt niet. Zelfde verhaal, en let op de komma in de bestandsnaam van Fredoka. Die hoort erbij.

Alles is wit geworden. Je achtergrondkleur en je tekstkleur liggen te dicht bij elkaar. Kijk naar de lightness van allebei.

Mijn regel wordt genegeerd. Kijk of hij in de devtools überhaupt voorkomt. Staat hij er niet, dan klopt je selector niet. Staat hij er doorstreept, dan verliest hij van een andere regel.