Samenvatting Labo 02 - CSS

Doelstellingen

• Tag-, class-, id- en pseudo-selectoren vlot gebruiken.
• tekst- en achtergrondkleuren toepassen.
• Herbruikbare classes maken.
• Gebruik en functie van normalize.css begrijpen.
• Inzicht in het box-model en toepassen van box-sizing property.
• Externe lettertypen toevoegen en fallback-font instellen.
• Stylesheets koppelen aan HTML-pagina en selecties optimaliseren voor herbruikbaarheid.
• CSS analyseren en debuggen met webdeveloper tools.

Beschrijving van de oefening

In dit labo maakten we een kleine website met CSS. We starten met het koppelen van normalize.css, een Google font (Montserrat) en een eigen stylesheet.
Daarna hebben we box-sizing ingesteld, root- en body-selectoren gedefinieerd, containers gemaakt voor header, main en footer, en nav links gestyled.
We experimenteerden met geavanceerde selectors, pseudo-classes, modifier- en utility classes, responsive padding, inheritance, hover- en focus-visible effecten.
Zo leerden we hoe je CSS efficiënt, herbruikbaar en toegankelijk kan maken.

Wat was belangrijk?

• De cascade en volgorde van stylesheets respecteren.
• gebruik van herbruikbare classen (.highlight, .container--narrow, .m-1, .p-2, ...).
• Semantische HTML combineren met CSS voor een nette structuur.
• responsive design toepassen met viewport units.
• geavanceerde selectors gebruiken (nth-child, combinators, adjecent sibling, attribute selectors).
• Hover- en focus-visible effecten voor betere toegankelijkheid.
• Normalize.css gebruiken om consistentie tussen browsers te garanderen.

Wat had ik nodig?

• HTML-bestanden (index.html)
• CSS-bestanden (stijl.css, normalize.css)
• Google font (Montserrat) met fallback font
• Code-editor (VS Code)
• Referentie screenshots of oefenbestanden
• W3C-validator en aXe DevTools voor testen en debugging

Gerelateerde Links

• W3C HTML Validator
• aXe DevTools
• W3schools