CSS Basics, Properties en selectors
In de workshop CSS Basics van dinsdag 1/9/2026 wordt uitgelegd wat je moet doen en kan je vragen stellen.
Gisteren ben je aan de slag gegaan met je eerste visitekaartje. Waarschijnlijk heb je wat teksten in HTML aangepast, en heb je een aantal properties en values in CSS (Cascading Style Sheets) veranderd. Misschien heb je ook al een selector aangeraakt en naar je hand gezet, en vraag je je af wat nu de volgende stap is. In deze workshop gaan we iets dieper in op deze onderwerpen, bekijken we hoe uitgebreid CSS eigenlijk is, en staan we stil bij één van de coolste tools uit de gereedschapskist van een frontend developer, de dev tools!
Om te onderzoeken wat een browser met CSS zoal kan, gaan we eerst websites inspecteren. Elke website is gemaakt met HTML, CSS en JavaScript, en iedereen kan de code van elke website inspecteren via de developer tools van een browser. Als frontender doe je dit regelmatig. Niet alleen om fouten op te lossen, of snel te experimenteren, maar ook om nieuwe technieken te leren en uit te proberen.
Daarna gaan we bekijken wat CSS selectors zijn en hoe ze werken.
Open je visitekaartje in een browser, klik met je rechtermuis op een willekeurig element op de pagina, en kies Inspect of Inspect Element.
(Gebruik je Safari, zet bij Settings dan de “Features for web developers” aan. Dit staat standaard uit)
Hierna krijg je de developer tools van je browser te zien. Die van Firefox zien er zo uit. Browsers verschillen onderling iets, maar grofweg kunnen we er hetzelfde mee. Welke tools je kiest, maakt dus niet uit, en is vooral een kwestie van gewenning en voorkeur.
Voer deze 7 opdrachten stap voor stap uit. Schrijf de schuine woorden op het whiteboard en bespreek met je tafel wat ze betekenen.
- Onderzoek wat je kunt doen met het deel waar je de HTML ziet (dit noemen we de DOM, het Document Object Model, en alle styling wordt via selectors toegepast op de DOM).
- Pas enkele CSS values aan, en kijk wat er gebeurt als je dat doet.
- Probeer nieuwe properties toe te voegen aan bestaande elementen; je krijgt suggesties terwijl je typt.
- Kijk wat er gebeurt als je meerdere properties combineert of overschrijft (waarschijnlijk zie je hierdoor wat Cascading betekent).
- Pas live de selectors aan, en kijk wat er gebeurt.
- Ververs de pagina, en je bent al je gepiel weer kwijt :)
- Inspecteer op de website van je eigen voetbalvereniging, yogaclub, muziekschool, bijbaantje, fitnessschool of het werk van je ouders hoe de HTML en CSS zijn opgebouwd.
CSS betekent Cascading Style Sheets. Met CSS kan je de HTML elementen van je website stylen. Je kan bijvoorbeeld de layout bepalen met Flexbox, Grid of de Position van een element bepalen. Je kan elementen een kleur geven, lettertypes bepalen en animaties maken.
Om een HTML element te stylen gebruik je selectors. Met een selector selecteer je een HTML element waarna je het een style kan geven. Dat ziet er bijvoorbeeld zo uit:
<!-- De HTML van een website -->
<h1>Jane Doe</h1>/* Styling van het h1 element in CSS */
h1 { /* Dit is de selector */
color: red; /* Dit is de property `color` met de value `red` */
}De H1 heeft nu een rode kleur gekregen.
Er bestaan veel verschillende selectors in CSS. Hieronder staan een aantal uitgelegd die ook in de CSS van de leertaak staan.
De type selector in CSS selecteert de HTML elementen in de DOM op Node name. Dat betekent dat je het HTML element zelf ken gebruiken om het in CSS te selecteren. Dat ziet er zo uit, de HTML elementen body, h1 en p krijgen in CSS hun styling met behulp van een type selector:
<!-- HTML -->
<body>
<article>
<header>
<h1>Jane Doe</h1>
<p class="slogan"><em>Creatieve Frontend Developer in spé</em></p>
</header>
</article>/* CSS met type selectors */
body {
font-family: Helvetica;
font-size: 24px;
color: #10214e;
}
h1 {
margin: 2rem 0 1rem 0;
color: gold;
}
p {
font-size: 1.25em;
color: #030711;
}Een class selector selecteert een HTML elementen met een class. Dat betekent dat je in HTML een element een class attribuut kan meegeven en dat kan gebruiken in CSS om het te stylen. Een voordeel van een class selector gebruiken is dat je meerdere elementen dezelfde class kan geven, die krijgen dan dezelfde styling.
Dat ziet er zo uit, p met de class krijgt een style, de p zonder class niet:
<!-- HTML -->
<p class="slogan">
<em>Creatieve Frontend Developer in spé</em>
</p>
<p>
Het WEB is te gek! <br> Met HTML, CSS en JS kan ik vette, interactieve web apps maken.
</p>/* CSS met een class selector */
.slogan {
font-size:1.25em;
color:#030711;
}Een id selector selecteert een HTML elementen met een bepaald id. Je kan een HTML element een id attribuut meegeven, in CSS kan je dat gebruiken om te stylen. Elke id moet uniek zijn, je kan in HTML dus niet hetzelfde id gebruiken voor verschillende elementen, zoals met een class wel kan.
Het stylen van een HTML element met een id ziet er zo uit:
<!-- HTML -->
<header id="intro">
<p>Inleiding van een pagina</p>
</header>/* CSS met een id selector */
#intro {
font-size:1.25em;
color:#030711;
}Maar er zijn nog veel meer selectors, zoals Pseudo-class selector en Attribute selectors, en je kan selectors combineren met Combinators and separators. Die ga je nu zelf onderzoeken:
- Schrijf met je tafel zoveel mogelijk voorbeelden van verschillende selectors op jullie whiteboard. Gebruik bronnen zoals MDN en vraag ook ChatGPT om hulp. (Bij FDND vinden we het prima als je “AI” als sparring partner gebruikt, zolang je zelf blijft nadenken over de antwoorden, en code en teksten niet rechtstreeks gebruikt in je werk. Meer info en uitleg hierover vind je op docs.)
- Als jullie denken ze allemaal te hebben, post dan een foto van jullie lijst in het Sprint 1 kanaal op Teams.
Voordat je verder gaat met ontwerpen en bouwen van je eigen visitekaartje gaan we eerst de CSS van de leertaak bekijken. In de leertaak staat al code klaar die je kan gebruiken, in het CSS file style.css staan comments met uitleg per selector. Bekijk met je tafel de CSS, bespreek alle code, lees alle comments, snap je al wat er staat uitgelegd? Welke selectors herken je, welke properties ken je al en welke nog niet?
- Schrijf in je schets van maandag de CSS properties die je nodig denkt te gaan hebben. Bekijk hier welke er zijn in CSS.
- Breid daarna je CSS code uit met selectors, properties en values.
- Leg in je CSS code, met behulp van comments, enkele selectors en properties die je net hebt toegepast uit. Link in je comments naar bronnen op MDN, waarin deze standaarden worden uitgelegd.
🛠️ Ga vanmiddag verder met het uitpluizen van verschillende selectors, properties en values van CSS. Pas de bestaande CSS aan naar je eigen voorkeuren, en vergeet niet je werk via GitHub te integreren en te testen als het live staat.
💪 Ben je al goed met code? Dan hebben we een uitdagende opdracht voor jou! Gooi alle CSS uit jouw repo weg en probeer zonder de HTML elementen aan te passen jouw visitekaartje te bouwen. Je mag wel de content, zoals je naam en je skills aanpassen, maar niet de HTML elementen. Dit heet ook wel CSS Zen Garden en is een opdracht die frontenters al sinds 2003 doen om te laten zien wat er allemaal met CSS kan. Bekijk de designs op de CSS Zen Garden maar eens ...
💡 Een website is nooit af, en je kunt altijd verbeteringen blijven doorvoeren. Dit itereren op je werk is wat bij FDND centraal staat. Commit en push je werk regelmatig, en maak je niet te druk over of het “af genoeg” is. Elke verandering of verbetering die je maakt, en alles wat je leert, is waardevol.
Bronnen die bij de workshop van vandaag horen:
- Alles over CSS: https://developer.mozilla.org/en-US/docs/Web/CSS
- CSS selectors and combinators: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Selectors/Selectors_and_combinators
Wil je leren over CSS en weet je niet waar je moet beginnen? Probeer dan deze bron:
- CSS first steps: https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps
Zin in een spelletje 🕹️ en oefenen met verschillende CSS Selectors?
- Probeer level 32 te halen op https://flukeout.github.io
💪 Wil je een browser die ontwikkelen nog makkelijker maakt?
- 🚀 Installeer dan https://polypane.app (gratis voor studenten via GitHub)