Labo 02 – De basis van CSS

Doelen van de oefening

  • Tag-, klasse-, ID- en pseudo-selectoren correct leren gebruiken
  • Tekst- en achtergrondkleuren toepassen en herbruikbare stijlen maken
  • Het boxmodel en de eigenschap box-sizing begrijpen
  • Werken met externe en fallback-lettertypes
  • Stylesheets koppelen aan een HTML-pagina en CSS debuggen met ontwikkelaarstools
  • Geavanceerde selectoren gebruiken, zoals combinatoren en pseudo-klassen
Foto van man die html doet

Beschrijving

In deze oefening heb ik de basis van het opmaken van een website met CSS geleerd. Ik oefende met verschillende soorten selectoren, zoals tags, klassen, ID’s en pseudo-selectoren. Ik werkte met kleuren, lettertypes en het boxmodel om de lay-out en tekststijl aan te passen. Ik leerde ook hoe ik een stylesheet aan een HTML-pagina kan koppelen, herbruikbare klassen kan maken en mijn code kan debuggen met ontwikkelaarstools. Zo kreeg ik inzicht in hoe kleine aanpassingen een groot effect kunnen hebben op het uiterlijk van een webpagina.

Gerelateerde links

W3C validator
axe browser extension

Reflectie

Woaw!

De achtergrondkleur van de pagina aanpassen
Marges en opvulling gebruiken om afstanden te regelen
Lettertype en grootte veranderen
Begrijpen hoe deze eigenschappen de lay-out beïnvloeden

Aauuw!

Uitzoeken hoe ik de container het best gebruik voor structuur en lay-out

Niet zeker?

Hoe ik nav a en nav ul het best kan gebruiken in mijn CSS
Of mijn navigatie op de meest efficiënte manier is gestyled