07 - CSS - border

Borders in CSS

1 / 11

Slide 1: Tekstslide

ICTMBOStudiejaar 1,2

In deze les zitten 11 slides, met interactieve quizzen en tekstslides.

Lesduur is: 60 min

Onderdelen in deze les

Borders in CSS

Slide 1 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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

Slide 3 - Woordweb

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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

Slide 11 - Open vraag

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

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Tekstslide

Slide 3 - Woordweb

Slide 4 - Tekstslide

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Tekstslide

Slide 9 - Tekstslide

Slide 10 - Tekstslide

Slide 11 - Open vraag

Meer lessen zoals deze

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

CSS Quiz