07 - CSS - border

Borders in CSS

1 / 11

Slide 1: Slide

ICTMBOStudiejaar 1,2

This lesson contains 11 slides, with interactive quizzes and text slides.

Lesson duration is: 60 min

Items in this lesson

Borders in CSS

Slide 1 - Slide

This item has no instructions

Leerdoel

Aan het einde van de les kun je uitleggen wat de term 'border' betekent in CSS en hoe je het kunt gebruiken.

Slide 2 - Slide

This item has no instructions

Wat weet je al over het gebruik van de term 'border' in CSS?

Slide 3 - Mind map

This item has no instructions

Inleiding

Border in CSS verwijst naar de rand van een element zoals een tekstvak of een afbeelding. Het kan worden gebruikt om de stijl, dikte, kleur en vorm van de rand aan te passen.

Slide 4 - Slide

This item has no instructions

Border-stijlen

Er zijn verschillende stijlen die je kunt gebruiken voor een border, zoals solid, dashed, dotted, double, groove, ridge, inset en outset.

p { border-style: dotted; }

p { border-style: dashed; }

p { border-style: solid; }

p { border-style: double; }

Slide 5 - Slide

This item has no instructions

Border-dikte

Met CSS kun je de dikte van de border aanpassen met behulp van de 'border-width' eigenschap. Je kunt waarden opgeven in pixels, percentages of andere eenheden.

p {

border-style: solid;

border-width: 5px;

}

Slide 6 - Slide

This item has no instructions

Border-kleur

Met CSS kun je de kleur van de border aanpassen met behulp van de 'border-color' eigenschap. Je kunt een kleur opgeven als naam, hexadecimale waarde of RGB-waarde.

p {

border-style: solid;

border-color: red;

}

Slide 7 - Slide

This item has no instructions

Border-radius

Border-radius wordt gebruikt om de hoeken van een element af te ronden. Het kan worden toegepast op alle vier de hoeken of individueel op elke hoek.

p {

border: 2px solid red;

border-radius: 12px;

}

Slide 8 - Slide

This item has no instructions

Oefening

Creëer een HTML-bestand met elementen zoals paragrafen (<p>), koppen (<h1>, <h2>, etc.) en lijsten (<ul>, <ol>) binnen de <body>.
Gebruik CSS om randen toe te voegen aan deze elementen met behulp van de border-eigenschap.

Slide 9 - Slide

This item has no instructions

Samenvatting

Je hebt nu geleerd wat de term 'border' betekent in CSS en hoe je het kunt gebruiken om de stijl, dikte, kleur en vorm van de rand van een element aan te passen.

Slide 10 - Slide

This item has no instructions

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

Slide 11 - Open question

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.

07 - CSS - border

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Mind map

Slide 4 - Slide

Slide 5 - Slide

Slide 6 - Slide

Slide 7 - Slide

Slide 8 - Slide

Slide 9 - Slide

Slide 10 - Slide

Slide 11 - Open question

More lessons like this

01 - CSS - wat is

HTML + CSS les 4: selectors + margins + ontwerp + flexbox

08b - CSS - margin en padding

INF_CHR22_VWO_LES-03

INF_CHR21_VWO_LES-03

HTML5, CSS3 en JS QUiZ

14 - CSS - quiz

HTML5, CSS3 en JS QUiZ