What is LessonUp
Search
Channels
AI tools
Beta
Log in
Register
‹
Return to search
Workshop 4 id's en classes
Id's en classes in CSS en HTML
Om CSS en HTML goed met elkaar te laten samenwerken moet je zogenaamde id's en/of classes aanmaken. Hiermee koppel je css-tags aan html-elementen.
Docent doet eerst voor
Dan samen doen
Daarna alleen doen
1 / 13
next
Slide 1:
Slide
Software Developer
MBO
Studiejaar 1
This lesson contains
13 slides
, with
text slides
and
2 videos
.
Lesson duration is:
15 min
Start lesson
Save
Share
Print lesson
Items in this lesson
Id's en classes in CSS en HTML
Om CSS en HTML goed met elkaar te laten samenwerken moet je zogenaamde id's en/of classes aanmaken. Hiermee koppel je css-tags aan html-elementen.
Docent doet eerst voor
Dan samen doen
Daarna alleen doen
Slide 1 - Slide
Wat is HTML
HTML betekent HyperText Markup Language. HTML wordt gebruikt om structuur aan te brengen binnen je website. In feite is dit de basis van jouw website.
Slide 2 - Slide
Slide 3 - Slide
Hoe laat je ze samenwerken?
Je kunt in HTML en in CSS dezelfde ID gebruiken voor de elementen die moeten samenwerken.
Slide 4 - Slide
Bijvoorbeeld
HTML:
<div id="hallo">
Ik ben een stukje tekst
</div>
CSS:
#hallo {
color: blue;
}
Slide 5 - Slide
Dit kan ook met een class
HTML:
<div class="hallo">
Ik ben een stukje tekst
</div>
CSS:
.hallo {
color: blue;
}
Slide 6 - Slide
HTML:
<div
id
="hallo">
Ik ben een stukje tekst
</div>
CSS:
#
hallo {
color: blue;
}
HTML:
<div
class
="hallo">
Ik ben een stukje tekst
</div>
CSS:
.
hallo {
color: blue;
}
Slide 7 - Slide
ID vs Class
Een ID gebruik je maar eenmaal binnen een webpagina. Slechts 1 element wordt aangesproken.
Een class is herbruikbaar en dus voor meerdere elementen tegelijk toepasbaar.
Slide 8 - Slide
Slide 9 - Video
Slide 10 - Video
Rijen met kleuren
Maak drie blokken naast elkaar en drie blokken onder elkaar. Dus 9 blokken in totaal. Kleur elke rij in een andere kleur.
Gebruik alleen "class"!
Zie de voorbeelden hiernaast.
Slide 11 - Slide
Rijen met kleuren
Maak het voorbeeld hiernaast na.
Gebruik alleen "class".
Slide 12 - Slide
Rijen met kleuren
Maak het voorbeeld hiernaast na.
Gebruik "id" voor de afwijkende kleur.
Slide 13 - Slide
More lessons like this
Ouderavond Londen
November 2018
- Lesson with
17 slides
by
Dé Schoolreisgids
Middelbare school
vmbo, mavo, havo, vwo
Leerjaar 1-6
Dé Schoolreisgids
EXCURSIE: Corrosia - Scheppen en schitteren
November 2024
- Lesson with
23 slides
by
Kunst is Dichterbij Dan je Denkt (KIDD)
Kunst
Kunstzinnige oriëntatie
Basisschool
Groep 5
Kunst is Dichterbij Dan je Denkt (KIDD)
Vlaggen Quiz
June 2025
- Lesson with
37 slides
by
Quiz!
Burgerschapskunde
Aardrijkskunde
+6
Basisschool
Middelbare school
Praktijkonderwijs
Speciaal Onderwijs
MBO
vmbo, mavo, havo, vwo
Leerroute VL
Leerroute VB
Leerroute VK
Leerroute VG
Leerroute VT
Leerroute M
Leerroute H
Leerroute V
Groep 6-8
Leerjaar 1,2
Quiz!
Van Gogh's Way to Go (2)
January 2023
- Lesson with
28 slides
by
Van Gogh Museum
Muziek
Kunst
Basisschool
Groep 7,8
Van Gogh Museum
Ouderavond Parijs
January 2018
- Lesson with
22 slides
by
Dé Schoolreisgids
Aardrijkskunde
Middelbare school
vmbo t, mavo
Leerjaar 4
Dé Schoolreisgids
Differentiëren in LessonUp
August 2023
- Lesson with
13 slides
by
LessonUp Academy
LessonUp
HBO
Studiejaar 1
LessonUp Academy
The Cloudmaker
July 2022
- Lesson with
27 slides
by
Filmeducatie
Spaans
Middelbare school
havo, vwo
Leerjaar 1-3
Filmeducatie
Barcelona leerlingen voorbereidingsquiz
July 2018
- Lesson with
20 slides
by
Dé Schoolreisgids
Middelbare school
vmbo, mavo, havo, vwo
Leerjaar 1-6
Dé Schoolreisgids