Les4 - CSS Selectoren: HTML Elementen Aanspreken

Cascading Stylesheets

CSS Selectoren: HTML Elementen Aanspreken

1 / 22

Slide 1: Slide

Applicatie- en mediaontwikkelaarMBOStudiejaar 1

This lesson contains 22 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?

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

Slide 7 - Slide

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

External stylesheet

<head>

</head>

Slide 9 - Slide

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

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

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

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

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

Schrijf 3 dingen op die je deze les hebt geleerd.

Slide 19 - Open question

Schrijf 2 dingen op waarover je meer wilt weten.

Slide 20 - Open question

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

Slide 21 - Open question

Bronnen

Webdesign p.87

w3schools.com/css/css_selectors.asp

Slide 22 - Slide

Les4 - CSS Selectoren: HTML Elementen Aanspreken

Items in this lesson

Slide 1 - Slide

Slide 2 - Poll

Slide 3 - Slide

Slide 4 - Slide

Slide 5 - Slide

Slide 6 - Slide

Slide 7 - Slide

Slide 8 - Slide

Slide 9 - Slide

Slide 10 - Slide

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

Slide 11 - Slide

Slide 12 - Slide

Slide 13 - Slide

Slide 14 - Slide

Slide 15 - Slide

Slide 16 - Quiz

Slide 17 - Slide

Slide 18 - Slide

Slide 19 - Open question

Slide 20 - Open question

Slide 21 - Open question

Slide 22 - Slide

More lessons like this

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