This lesson contains 21 slides, with interactive quizzes and text slides.
Lesson duration is: 60 min
Items in this lesson
Cascading Stylesheets
CSS Selectoren: HTML Elementen Aanspreken
Slide 1 - Slide
Hoe sta je erin vandaag?
😒🙁😐🙂😃
Slide 2 - Poll
Leerdoel
Aan het eind van de les kunnen de studenten html elementen aanspreken vanuit css.
Slide 3 - Slide
Inhoud
Stijl regels
Soorten Styling
Soorten Selectors
Style regels
Slide 4 - Slide
Inleiding
CSS (Cascading Style Sheets) wordt gebruikt om de presentatie van een webpagina te definiëren. Het stelt ons in staat om de opmaak en stijl van HTML-elementen te beheren.
Slide 5 - Slide
Soorten styling
Inline styling
Embedded styling
External styling
Slide 6 - Slide
Inline styling
Opmaak op het element zelf schrijven
nadeel?
<p style=“color:purple”>
Doen: plaatst 3 titels in je pagina en geef ze de kleur rood. Voeg ook drie grijze paragrafen tekst toe.
Id-selectoren worden gebruikt om een uniek HTML-element te targeten. Het id-attribuut in HTML moet uniek zijn, wat het gebruik van id-selectoren onderscheidt van class-selectoren.
#mijnID {
color: blue;
}
Slide 12 - Slide
Class-selectoren
Class-selectoren worden gebruikt om meerdere elementen te targeten die dezelfde class-attribuutwaarde delen.
.mijnClass {
color: red;
}
Slide 13 - Slide
Cascade regels
CSS-regels worden toegepast in volgorde van specificatie, waarbij later gedefinieerde stijlen de eerder gedefinieerde stijlen kunnen overschrijven.
Slide 14 - Slide
Specificiteit
Bepaalt welke stijlregels voorrang krijgen wanneer meerdere regels op hetzelfde element van toepassing zijn.
#mijnID {
color: blue;
}
.mijnClass {
color: red;
}
Slide 15 - Slide
Hoe spreek je een element aan met een ID attribute
A
.
B
*
C
@
D
#
Slide 16 - Quiz
Wat: Maak een eenvoudige HTML-pagina style het met basis-CSS-regels zoals kleuren, lettertypes en marges.
Hoe: Maak een nieuwe mappen structuur aan.
Index.html.
Maak gebruik van een externe stylesheet.
Hulp: W3schools
Webdesign boek
Docent
Tijd: 20 minuten
Klaar:
Maak twee pagina's erbij
Stijl ze met dezelfde stylesheet.
Link de pagina samen.
Slide 17 - Slide
Schrijf 3 dingen op die je deze les hebt geleerd.
Slide 18 - Open question
Schrijf 2 dingen op waarover je meer wilt weten.
Slide 19 - Open question
Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.