edubun
Nederlands
English한국어EspañolPortuguêsFrançaisDeutschItalianoNederlandsРусскийBahasa Indonesia日本語
Home›Websites maken

CSS

Negen hoofdstukken over het vormgeven van webpagina's met CSS, van de opbouw van één regel tot een complete pagina die zich op een telefoon opnieuw indeelt. Elk hoofdstuk heeft een live-editor die de berekende stijlen van je pagina controleert, plus flitskaarten en 9 tot 11 oefenvragen met uitleg.

Voortgang

Over deze cursus

Zelfs een pagina zonder CSS heeft stijl: koppen zijn groot en vet, links blauw en onderstreept en lijsten ingesprongen. Dat komt uit het standaardstijlblad van de browser. Jouw regels worden daaroverheen toegepast. Daarom is het eindproject een goede test: de bakkerijpagina uit de HTML-cursus krijgt kleur, ruimte en indeling met ongeveer 40 regels CSS, zonder de HTML te veranderen.

De negen hoofdstukken beginnen met Wat CSS doet en de opbouw van een regel. Daarna volgen selectors en de cascade, waarbij je specificiteit berekent voor selectors zoals #menu .item a. Bij kleur en eenheden leer je benoemde kleuren, contrast en waarom rem meeschaalt met de basislettergrootte die de lezer mogelijk heeft aangepast. Het boxmodel verklaart borders en outlines. Daarna typografie, flexbox, de basis van grid en responsief ontwerp met mediaquery's, eerst voor mobiel: basisstijlen, daarna min-width-query's die kolommen toevoegen. Tot slot geef je een kleine pagina van begin tot eind vorm. Elke live-editor controleert de berekende stijlen. Een opdracht als .cards een flexcontainer met regelafbreking en 12px tussenruimte maken wordt dus beoordeeld op wat de browser echt berekent.

Twee veelgemaakte fouten zitten in de oefeningen. border: 2px #333 tekent niets omdat de borderstijl ontbreekt. outline: none verwijdert de toetsenbordfocusring, dus je moet er een andere duidelijke focusstijl voor terugzetten. Zichtbare focus staat op de eindcontrolelijst. Een geruststelling over indeling: vóór flexbox vroeg verticaal centreren trucs. Met display: flex zijn twee declaraties genoeg: justify-content en align-items.

Voor je begint

Met CSS geef je HTML vorm. Begin daarom met HTML als je nog nooit zelf een pagina hebt geschreven. In het laatste hoofdstuk geef je de bakkerijpagina uit het einde van die cursus een nieuwe vormgeving. Elk hoofdstuk heeft een live-editor op de pagina, dus je hoeft niets te installeren.

Als je klaar bent

Na afloop kun je een regel schrijven van selector tot declaratie, voorspellen welke van twee regels de cascade wint en controleren dat grijze tekst aan de door WCAG vereiste contrastverhouding van 4.5 op 1 voldoet. Je berekent de werkelijke breedte van een blok bij content-box, centreert onderdelen met flexbox, maakt drie gelijke kolommen met repeat(3, 1fr) en voegt de viewport-metatag toe die mediaquery's op telefoons laat werken.

  1. 1Wat CSS doetMet één CSS-bestand kun je alle pagina's van een site tegelijk anders vormgeven. Dat was het belangrijkste argument voor CSS toen het W3C in december 1996 CSS niveau 1 publiceerde.
  2. 2Selectors en de cascadeAls twee regels hetzelfde element verschillende kleuren geven, gokt CSS niet. Het vergelijkt de selectors en een id wint van elk aantal classes.
  3. 3Kleur en eenhedenLichtgrijze tekst #bbbbbb op wit heeft een contrastverhouding van 1.92 op 1. WCAG vraagt voor normale tekst minstens 4.5 op 1.
  4. 4Het blokmodelGeef een blok width: 200px, 16px binnenruimte en een rand van 2px en het neemt standaard 236 pixels schermbreedte in, geen 200.
  5. 5TypografieWCAG stelt regels van maximaal 80 tekens voor en een regelafstand van minstens 1.5 binnen alinea's. Met twee CSS-eigenschappen regel je beide.
  6. 6FlexboxVóór flexbox waren er trucs nodig om een blok verticaal te centreren. Met display: flex zijn twee declaraties genoeg: justify-content en align-items.
  7. 7Basis van gridgrid-template-columns: repeat(3, 1fr) maakt met één regel drie gelijke kolommen en de browser plaatst elk kind in de volgende vrije cel.
  8. 8Responsief ontwerp met mediaqueriesZonder één metatag delen veel telefoons een pagina in alsof het scherm veel breder is (MDN noemt 980 pixels als voorbeeld) en verkleinen die daarna, zodat een mediaquery voor telefoons nooit wordt uitgevoerd.
  9. 9Een kleine pagina vormgevenDe bakkerijpagina uit de HTML-cursus krijgt kleuren, afstanden en indeling uit ongeveer 40 regels CSS en de HTML verandert helemaal niet.

Verwante cursussen

  • HTML
    Tien eenheden over het met de hand schrijven van webpagina's, van het skelet dat elke pagina deelt tot een kleine afgeronde pagina met een menu, een afbeelding, een tabel en een formulier. Elke eenheid heeft een live-editor die je pagina laat zien terwijl je typt en hem controleert, plus flitskaarten en 9 tot 11 oefenvragen met uitleg.
  • Webtoegankelijkheid
    Zes hoofdstukken over pagina's bouwen die werken voor mensen met schermlezers, toetsenborden, zoom of hoog contrast. Elk hoofdstuk volgt de behandelde succescriteria van WCAG 2.2 en heeft live HTML-oefeningen die je code controleren, flitskaarten en 9 of 10 oefenvragen met uitleg.
  • Hoe computers werken · Computerbasis en typen
    Een computer bewaart alles, van foto's tot programma's, als patronen van 0 en 1 en bewerkt die met kleine schakelaars. Zes hoofdstukken bouwen van onderaf op: binaire getallen, bytes en tekst, logische poorten, optellen met poorten, de cyclus ophalen, decoderen en uitvoeren van de CPU en het geheugen. Je kunt bits omschakelen, poorten verbinden, overdrachten door een opteller zien lopen en een kleine computer per fase door zijn programma laten gaan.
  • JavaScript · Programmeren
    Twaalf hoofdstukken voor complete beginners, van een eerste console.log-regel tot een fooiencalculator en FizzBuzz. Elk hoofdstuk heeft code die je op de pagina kunt bewerken en uitvoeren, oefeningen die je uitvoer controleren, flitskaarten voor de termen en 10 tot 12 vragen ‘Wat drukt deze code af?’ met uitleg.
Bronnen van deze cursus (5)
  • W3C CSS Working Group specifications: CSS Snapshot 2025, Selectors Level 4, CSS Cascading and Inheritance Level 5, CSS Color Level 4, CSS Values and Units Level 4, CSS Box Model Level 3, CSS Box Sizing Level 3, CSS Fonts Level 4, CSS Flexible Box Layout Level 1, CSS Grid Layout Level 2, Media Queries Level 4 and Level 5 (w3.org/TR/, checked 2026-10-17)
  • MDN Web Docs, Learn web development: CSS styling basics and CSS layout, and the CSS reference (developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics, .../Core/CSS_layout, developer.mozilla.org/en-US/docs/Web/CSS, checked 2026-10-17)
  • W3C, CSS history and CSS1 Recommendation of 17 December 1996 (w3.org/Style/CSS20/history.html, w3.org/press-releases/1996/css1-rec, checked 2026-10-17)
  • W3C WCAG 2.2, success criteria 1.4.3 Contrast (Minimum)
  • 1.4.8 Visual Presentation, 1.4.10 Reflow, 1.4.12 Text Spacing (w3.org/TR/WCAG22/, checked 2026-10-17).

Geraadpleegd: 2026-10-17