Summary  
This chapter explains the CSS concept of block-level elements, covering their default `display: block` behavior, how to adjust their width, height, margins, borders and padding, and techniques for centering them within a parent container.

General domain of usage  
Web page layout and styling

**Blokniveau**-elementen zijn rechthoekig en stapelen zich op elkaar, waardoor andere elementen niet op dezelfde regel kunnen staan. Dit gedrag wordt bepaald door de CSS-eigenschap `display: block`.

Belangrijke punten over blokniveau-elementen:
- Standaard ingesteld op `display: block`;
- De breedte beslaat de volledige breedte van de bovenliggende container;
- De hoogte wordt bepaald door de inhoud, maar kan met CSS worden aangepast;
- Beginnen altijd op een nieuwe regel;
- Eigenschappen zoals `border`, `margin`, `padding`, `width` en `height` kunnen worden aangepast.

Hier volgt een voorbeeld waarin we `width`, `height` en `margin` manipuleren:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9Im1haW4tYm94Ij4KICAgICAgPGRpdiBjbGFzcz0iZmlyc3QtYm94Ij4xPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InNlY29uZC1ib3giPjI8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0idGhpcmQtYm94Ij4zPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

Lm1haW4tYm94IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBpbmRpYW5yZWQ7CiAgd2lkdGg6IDEwMHB4OwogIGhlaWdodDogMTAwcHg7Cn0KCi5maXJzdC1ib3ggewogIGJhY2tncm91bmQtY29sb3I6IGRhcmttYWdlbnRhOwogIHdpZHRoOiAzMHB4OwogIGhlaWdodDogNDBweDsKICBtYXJnaW4tbGVmdDogMjBweDsKfQoKLnNlY29uZC1ib3ggewogIGJhY2tncm91bmQtY29sb3I6IHRoaXN0bGU7CiAgd2lkdGg6IDMwcHg7CiAgaGVpZ2h0OiAxNXB4OwogIG1hcmdpbi1sZWZ0OiAzMHB4Owp9CgoudGhpcmQtYm94IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBvbGl2ZWRyYWI7CiAgd2lkdGg6IDUwcHg7CiAgaGVpZ2h0OiA0NXB4OwogIG1hcmdpbi1sZWZ0OiBhdXRvOwp9

Laten we bekijken hoe we een element kunnen centreren binnen zijn ouder.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9InBhcmVudCI+CiAgICAgIFBhcmVudCBFbGVtZW50CiAgICAgIDxkaXYgY2xhc3M9ImNoaWxkIj5DaGlsZCBFbGVtZW50PC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LnBhcmVudCB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzRGNUU3NzsKICBjb2xvcjogI2ZmZmZmZjsKICB3aWR0aDogMzAwcHg7CiAgaGVpZ2h0OiAxMDBweDsKfQoKLmNoaWxkIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMWUyNjM1OwogIGNvbG9yOiAjZmZmZmZmOwogIHdpZHRoOiA2MHB4OwogIGhlaWdodDogNjBweDsKICAvKiBXZSBjYW4gZ2l2ZSBgYXV0b2AgdmFsdWUgdG8gdGhlIGBtYXJnaW5gIHByb3BlcnR5IHRvIHJlY2VudGVyIHRoZSBlbGVtZW50LiAqLwogIG1hcmdpbi1sZWZ0OiBhdXRvOwogIG1hcmdpbi1yaWdodDogYXV0bzsKfQ==

Beheers de basisprincipes van CSS (Cascading Style Sheets), de opmaaktaal die het uiterlijk en de uitstraling van webpagina's transformeert. Verken kernconcepten zoals tekststijlen, kleuren, afstand, het boxmodel, Flexbox en decoratieve effecten. Ontwikkel vaardigheden om visueel aantrekkelijke en goed gestructureerde webpagina's te creëren. Ideaal voor beginners die een solide basis in CSS willen leggen.

Leer wat CSS is, hoe het te koppelen aan HTML en hoe HTML-elementen te stijlen met behulp van selectors. Verken fundamentele concepten zoals tekstkleuren, pseudo-klassen voor gebruikersacties en variabelen in CSS.

Ontdek hoe u tekst op uw webpagina's kunt opmaken en formatteren. Leer aangepaste lettertypen toepassen en verken diverse lettertype-eigenschappen om het uiterlijk van tekst te verbeteren.

Leer de basisprincipes van het boxmodel, dat de lay-out en de afstand van elementen op een webpagina bepaalt. Verken concepten zoals box-sizing, het toevoegen van ruimte aan elementen, werken met block-level en inline-elementen, en het toepassen van structurele en functionele pseudoklassen voor geavanceerde opmaak.

Ontdek Flexbox, een krachtig CSS-layoutmechanisme voor het rangschikken van elementen in rijen en kolommen. Leer hoe u de richting, uitlijning en afstand van elementen horizontaal en verticaal beheert, evenals het aanpassen van individuele flex-items voor nauwkeurige lay-outs.

Leer hoe u de visuele aantrekkingskracht van uw webpagina's kunt vergroten met CSS. Ontdek technieken voor het toepassen van achtergrondkleuren en -afbeeldingen, het stylen van afbeeldingen, het gebruik van decoratieve pseudo-elementen en het toevoegen van schaduwen om indrukwekkende ontwerpen te creëren.

Werken met Blokniveau-Elementen

Awesome!

Werken met Blokniveau-Elementen