Les4 - CSS Selectoren: HTML Elementen Aanspreken

Cascading Stylesheets

CSS Selectoren: HTML Elementen Aanspreken

1 / 22

Slide 1: Tekstslide

Applicatie- en mediaontwikkelaarMBOStudiejaar 1

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

Lesduur is: 60 min

Onderdelen in deze les

Cascading Stylesheets

CSS Selectoren: HTML Elementen Aanspreken

Slide 1 - Tekstslide

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

Inhoud

Stijl regels

Soorten Styling

Soorten Selectors

Style regels

Slide 4 - Tekstslide

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

Soorten styling

Inline styling
Embedded styling
External styling

Slide 6 - Tekstslide

Inline styling

Opmaak op het element zelf schrijven

nadeel?

Doen: plaatst 3 titels in je pagina en geef ze de kleur rood. Voeg ook drie grijze paragrafen tekst toe.

Slide 7 - Tekstslide

Embedded style

Een style tag openen binnen je html structuur

........

</style>

<html>

<head>

p{color:purple}

</style>

<p> Mijn tekst </P>

</head>

</html>

Slide 8 - Tekstslide

External stylesheet

<head>

</head>

Slide 9 - Tekstslide

CSS Selectoren

CSS-selectoren worden gebruikt om HTML-elementen te targeten en stijlen toe te passen. Er zijn verschillende soorten selectoren, zoals:

elementselectoren
id-selectoren
class-selectoren

Slide 10 - Tekstslide

Elementselectoren

Elementselectoren targeten specifieke HTML-elementen, zoals

p {

color: blue;

}

.highlight {

background-color: yellow;

}

#header {

font-size: 24px;

}

, , enz. Stijlen kunnen vervolgens worden toegepast op die specifieke elementen.

Slide 11 - Tekstslide

Id-selectoren

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

Class-selectoren

Class-selectoren worden gebruikt om meerdere elementen te targeten die dezelfde class-attribuutwaarde delen.

.mijnClass {

color: red;

}

Slide 13 - Tekstslide

Cascade regels

CSS-regels worden toegepast in volgorde van specificatie, waarbij later gedefinieerde stijlen de eerder gedefinieerde stijlen kunnen overschrijven.

Slide 14 - Tekstslide

Specificiteit

Bepaalt welke stijlregels voorrang krijgen wanneer meerdere regels op hetzelfde element van toepassing zijn.

#mijnID {

color: blue;

}

.mijnClass {

color: red;

}

Slide 15 - Tekstslide

Hoe spreek je een element aan met een ID attribute

Slide 16 - Quizvraag

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

Wat: Bezoek de website Yendor.nl

Maak de hoofdpagina na.

Hoe: Bestudeer het html structuur van de webpagina.

Maak deze na en maak gebruik van html5 tags.

Maak gebruik van een externe stylesheet.

Hulp: W3schools

Webdesign boek

Medestudent

Tijd: Lever dit in begin van volgende les

Klaar:

Probeer de webwinkel items met een javascript loop te generen

Slide 18 - Tekstslide

Schrijf 3 dingen op die je deze les hebt geleerd.

Slide 19 - Open vraag

Schrijf 2 dingen op waarover je meer wilt weten.

Slide 20 - Open vraag

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

Slide 21 - Open vraag

Bronnen

Webdesign p.87

w3schools.com/css/css_selectors.asp

Slide 22 - Tekstslide

Les4 - CSS Selectoren: HTML Elementen Aanspreken

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Poll

Slide 3 - Tekstslide

Slide 4 - Tekstslide

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Tekstslide

Slide 9 - Tekstslide

Slide 10 - Tekstslide

, , enz. Stijlen kunnen vervolgens worden toegepast op die specifieke elementen.

Slide 11 - Tekstslide

Slide 12 - Tekstslide

Slide 13 - Tekstslide

Slide 14 - Tekstslide

Slide 15 - Tekstslide

Slide 16 - Quizvraag

Slide 17 - Tekstslide

Slide 18 - Tekstslide

Slide 19 - Open vraag

Slide 20 - Open vraag

Slide 21 - Open vraag

Slide 22 - Tekstslide

Meer lessen zoals deze

2 HTML: CSS

01 - CSS - wat is

CSS - selectors

HTML & CSS: Opmaak met CSS

Webdesign - Les 3 (23/24): CSS

04 - CSS - selectoren

CSS

HTML & CSS 04 - 4.1 tmt 4.3 - CSS methodes, opmaak