Kleuren, typografie en het boxmodel
Pas kleuren toe met hex-, rgb- en hsl-waarden, kies lettertypen, stel grootten en regelhoogten in en gebruik margin, border en padding om elementen uit te lijnen.
Kleuren, typografie en het boxmodel is een gratis Frontend Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.
CSS-kleurwaarden
CSS ondersteunt meerdere kleurindelingen. Gebruik de indeling die in jouw context het duidelijkst is: hexadecimale codes voor merkkleuren, hsl() voor eenvoudig aanpassen van kleuren, rgb() voor programmatische waarden en benoemde kleuren voor snel prototypen.
color: #2b6cb0; /* hex */
color: rgb(43, 108, 176); /* rgb */
color: hsl(212, 61%, 43%); /* hsl */
color: royalblue; /* named */
color: rgba(0,0,0,0.5); /* rgba with alpha */Achtergrondkleuren en -afbeeldingen
Stel achtergronden van elementen in met background-color. Gebruik background-image met verlopen of URL's. De verkorte schrijfwijze background combineert kleur, afbeelding, positie, grootte en herhaling in één declaratie.
background-color: #f7fafc;
background-image: linear-gradient(135deg, #667eea, #764ba2);
background: url('/hero.webp') center / cover no-repeat #1a202c;Lettertype-eigenschappen
Regel typografie met: font-family (lettertype), font-size (em, rem, px), font-weight (100–900), font-style (italic), line-height (verhouding voor leesbaarheid) en letter-spacing (letterspatiëring).
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #1a202c;
}Teksteigenschappen
Aanvullende tekststijlen: text-align (left, center, right, justify), text-decoration (underline, line-through, none), text-transform (uppercase, capitalize) en text-overflow: ellipsis om tekst af te kappen.
h1 { text-align: center; text-transform: uppercase; }
a { text-decoration: none; }
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}rem versus em versus px
px is absoluut. em is relatief ten opzichte van de eigen font-size van het element (en wordt gecascadeerd). rem is relatief ten opzichte van de font-size van het hoofdelement (voorspelbaar). Gebruik voor de meeste afmetingen rem, zodat de voorkeuren voor lettergrootte van de gebruiker worden gerespecteerd.
html { font-size: 16px; } /* 1rem = 16px */
.card { padding: 1.5rem; } /* 24px */
.small { font-size: 0.875rem; } /* 14px */Het boxmodel
Elk HTML-element is een rechthoekige doos met vier lagen: inhoud (de werkelijke afmetingen van het element), opvulling (ruimte binnen de rand), rand en marge (ruimte buiten de rand).
/* Total width = content + padding + border */
.box {
width: 200px;
padding: 16px;
border: 2px solid #ccc;
margin: 24px;
}box-sizing: border-box
Standaard (content-box) worden opvulling en rand opgeteld bij de opgegeven breedte. Met box-sizing: border-box vallen opvulling en rand binnen de opgegeven breedte — wat bijna altijd is wat je wilt.
/* Apply globally */
*, *::before, *::after {
box-sizing: border-box;
}
/* Now width: 200px includes padding and border */
.card {
width: 200px;
padding: 20px; /* doesn't add to width */
}Samenvallende marges
Verticale marges tussen aangrenzende blokken vallen samen: alleen de grootste marge wordt toegepast. De marges van een ouder en zijn eerste of laatste kind vallen ook samen. Bij kinderen van Flexbox en Grid vallen marges niet samen.
Verkorte schrijfwijze voor padding
Met de verkorte schrijfwijze padding: top right bottom left stel je alle zijden in. Met twee waarden stel je de verticale en horizontale zijden in. Met drie waarden stel je boven, horizontaal en onder in.
padding: 16px; /* all sides */
padding: 8px 16px; /* top/bottom left/right */
padding: 8px 16px 24px; /* top left/right bottom */
padding: 8px 16px 24px 32px; /* top right bottom left */Randeigenschappen
Stel randen in met de verkorte schrijfwijze border: width style color. Voor afzonderlijke zijden gebruik je bijvoorbeeld border-top. Gebruik border-radius voor afgeronde hoeken. outline lijkt hierop, maar heeft geen invloed op de lay-out.
.card {
border: 1px solid #e2e8f0;
border-radius: 8px;
}
button:focus {
outline: 2px solid #3182ce;
outline-offset: 2px;
}Overloop
overflow: hidden knipt inhoud af die groter is dan het element. overflow: scroll voegt schuifbalken toe. overflow: auto voegt alleen schuifbalken toe wanneer dat nodig is. Gebruik overflow-x en overflow-y om de assen afzonderlijk te besturen.
Snelle controle
Wat is de totale weergegeven breedte van het element met box-sizing: border-box en width: 300px; padding: 20px; border: 2px solid?
Samenvatting: kleuren, typografie en boxmodel
Stel kleuren in met hex, rgb of hsl. Pas lettertypen toe met font-family, grootte, gewicht en line-height. Elk element is een doos: inhoud + opvulling + rand + marge. Schakel overal box-sizing: border-box in voor voorspelbare afmetingen.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Kleuren, typografie en het boxmodel” gratis?
Ja — de volledige tekst van “Kleuren, typografie en het boxmodel” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat leer ik in “Kleuren, typografie en het boxmodel”?
Pas kleuren toe met hex-, rgb- en hsl-waarden, kies lettertypen, stel grootten en regelhoogten in en gebruik margin, border en padding om elementen uit te lijnen. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Frontend Academy te beginnen?
Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Kleuren, typografie en het boxmodel”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?
Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Selectors en de cascade
- Kleuren, typografie en het boxmodel
- Display: de basis van block, inline, flex en grid
- Positionering: relative, absolute, fixed en sticky