09 - CSS - width en height

• ICT
• MBO
• Studiejaar 1,2

De Kracht van Width en Height

Leerdoel

Aan het einde van de les kun je de properties width en height in CSS gebruiken om de afmetingen van elementen op een webpagina aan te passen.

Wat weet je al over de properties width en height in CSS?

Introductie

CSS-properties width en height worden gebruikt om de breedte en hoogte van elementen op een webpagina aan te passen.

Width

De width property wordt gebruikt om de breedte van een element aan te passen. Het kan worden ingesteld als een absolute waarde, zoals pixels, of als een relatieve waarde, zoals percentages.

div {

    width: 25%;

}

div {

    width: 100px;

}

Height

De height property wordt gebruikt om de hoogte van een element aan te passen. Het kan ook worden ingesteld als een absolute waarde of als een relatieve waarde.

div {

    height: 100px;

}

div {

    height: 25%;

}

Extra Eigenschappen

Naast width en height zijn er nog andere eigenschappen die invloed hebben op de grootte van elementen, zoals padding en margin.

Oefening

Maak een webpagina met een afbeelding en stel de width en height properties in om de grootte van de afbeelding aan te passen.

Praktische Tips

Bij het instellen van width en height is het belangrijk om rekening te houden met responsief ontwerp en het behoud van de verhoudingen van elementen.

Samenvatting

De properties width en height zijn krachtige tools om de grootte van elementen op een webpagina aan te passen. Door ze effectief te gebruiken, kun je de vormgeving van je website optimaliseren.

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.