Een inline element kan nooit eenblock element bevatten, andersom kan wel!
Slide 5 - Tekstslide
Div-element
Het <div>-element wordt gebruikt als container voor andere HTML-elementen.
Slide 6 - Tekstslide
Div-element
Hiermee kun je eigenschappen voor een hele container instellen, bijv.:
Een <div>-element dat niet 100% breed is kun je centreren door de CSS-margin-eigenschap in te stellen op automatisch
Slide 7 - Tekstslide
Span-element
Een <span>-element is een inline container. Het is bedoeld om tekst op te maken.
Een <span>-element neemt de breedte van zijn inhoud over en start niet op een nieuwe regel. Het wordt gebruikt in block elementen.
Slide 8 - Tekstslide
Sleep elke term naar de meest passende hotspot
timer
0:45
block element
<span>
inline element
<a>
<div>
<p>
<h1>
<strong>
Slide 9 - Sleepvraag
Weet je nog? Type-selectors
body, h1 en p zijn voorbeelden vantype-selectors.(ook wel tag-selectorsgenoemd).Je gebruikt ze om alle elementen op een pagina te selecteren aan de hand van hun tagnaam.
Slide 10 - Tekstslide
Slide 11 - Video
Class-selector (.)
Wordt gedefinieerd in CSS met een . (dot of punt)
Wordt gekoppeld aan een element met het class-attribuut
Meerdere HTML-elementen kunnen dezelfde klasse delen.
Slide 12 - Tekstslide
Slide 13 - Video
Id-selector (#)
Wordt gedefinieerd in CSS met een #(hashtag of hekje)
Wordt gekoppeld aan een element met het id-attribuut
Slechts 1 HTML-element per document kan een bepaald id bevatten.
Slide 14 - Tekstslide
Welke van de onderstaande stijldeclaraties heeft betrekking op een class selector?
timer
0:30
A
p { color: red; }
B
.spacious { margin: 2em; }
C
#demo { border: red 2px solid; }
D
a[title] { color: purple; }
Slide 15 - Quizvraag
Bekijk de code hiernaast.
Wat zie je?
timer
1:00
A
Een witte koptekst op een gele achtergrond.
B
Een blauwe koptekst op een witte achtergrond.
C
Een gele koptekst op een witte achtergrond.
D
Een rode koptekst op een witte achtergrond.
Slide 16 - Quizvraag
Feest met CSS-selectors!
Er valt nog veel meer te leren over CSS-selectors!
Oefenen met selectors? Speel CSS-diner!
https://flukeout.github.io/
Slide 17 - Tekstslide
Slide 18 - Video
CSS Box model
Andere manieren dan de breedte (width) van een division om de lay-out en de positionering van HTML-elementen te beรฏnvloeden zijn:
Margin
Padding
Border
Slide 19 - Tekstslide
Weet je nog? padding
bepaalt de afstand die vrijgehouden wordt tussen de inhoud en de verschillende randen (border) van een element
Slide 20 - Tekstslide
Weet je nog? margin
bepaalt de afstand van de rand van een element tot de rand van het parent element of de rand van een aangrenzend element
Slide 21 - Tekstslide
Division in een division
Alle HTML-elementen hebben margin en padding, bijv. ook <p> of <h1>
Bij elementen in een element moet je rekening houden met de margin en padding van beide elementen
Slide 22 - Tekstslide
Sleep elke CSS-eigenschap naar de juiste hotspot
timer
0:45
margin
padding
border
content
Slide 23 - Sleepvraag
Opdracht (thuis afmaken)
Maak de volgende aanpassingen aan de rainbow-website:
Voeg kleur en opmaak toe met een of meer id- en class-selectors
Voeg een border en een margin rondom van 10 pixels en een padding van boven en onder 12 pixels en links en rechts 6 pixels aan je plaatje toe
Voeg een container-element toe waarin een kopje en een tekst zitten. Geef deze container een andere achtergrondkleur en een breedte van 300 pixels. Lijn hem dan in het midden uit.
Slide 24 - Tekstslide
Kun je de structuur en indeling van je website nu beter bepalen?