Wat is LessonUp
Zoeken
Kanalen
Inloggen
Registreren
‹
Terug naar zoeken
CSS - selectors
Je weet wat een
css stylesheet
is
Je kan cs
selectors
,
properties
en
values
toepassen op html elementen
1 / 16
volgende
Slide 1:
Tekstslide
Informatica
Middelbare school
vwo
Leerjaar 4
In deze les zitten
16 slides
, met
interactieve quizzen
en
tekstslides
.
Start les
Bewaar
Deel
Printen
Onderdelen in deze les
Je weet wat een
css stylesheet
is
Je kan cs
selectors
,
properties
en
values
toepassen op html elementen
Slide 1 - Tekstslide
HTML + CSS
Dit is wat we nu aan het doen zijn. Onze "lelijke" html gaan we opmaken met css
Slide 2 - Tekstslide
Slide 3 - Tekstslide
Slide 4 - Tekstslide
Slide 5 - Tekstslide
:
3. In een apart css bestand
1. In een apart css bestand
Drie plekken om css te schrijven
2. In een apart css bestand
Slide 6 - Tekstslide
Maar wat staat er nou eigenlijk?
De
p
is de
selector.
Hiermee selecteer je op welke elementen je de stijl wil toepassen
De
color
is de
property
. Dat is de eigenschap die je wil aanpassen.
red
is de
value
. De waarde die je de property wil geven.
Alles bij elkaar staat hier dat we alle
p
elementen de kleur rood willen geven en all
a
elementen de kleur blauw.
Slide 7 - Tekstslide
Specificity
Link naar tutorial
http://htmldog.com/guides/css/intermediate/specificity/
https://codepen.io/timmiekun/pen/yQmNeR
Slide 8 - Tekstslide
C
ascading
S
tyle
S
heet
Cascade
/kasˈkeɪd/
(of water) pour downwards rapidly and in large quantities
pass (something) on to a succession of others
Slide 9 - Tekstslide
Waar slaat die cascading eigenlijk op?
Slide 10 - Open vraag
css classnames
Gebruik beschrijvende classnames
Goed: "title", "description", "warning-button"
Fout: "red", "uppercase", "small"
Slide 11 - Tekstslide
Slide 12 - Tekstslide
tot slot nog een wijze raad
~ "Een id (#) gebruiken is niet nodig en kan problemen geven met javascript" ~
Slide 13 - Tekstslide
Huiswerk maandag
https://htmldog.com/guides/css/beginner/
Slide 14 - Tekstslide
Wat vonden jullie van deze les?
A
:)
B
:(
Slide 15 - Quizvraag
Wat hebben jullie vandaag geleerd?
Slide 16 - Open vraag
Meer lessen zoals deze
HTML en CSS - les 2 - wat is css?
Augustus 2022
- Les met
15 slides
Informatica
Middelbare school
vwo
Leerjaar 4
HTML en CSS 3 - selectors
Januari 2019
- Les met
13 slides
Informatica
Middelbare school
vwo
Leerjaar 4
CSS en de chrome devtools
Februari 2020
- Les met
11 slides
Informatica
Middelbare school
vwo
Leerjaar 4
HTML en CSS - gebruik maken van classes
Augustus 2022
- Les met
17 slides
Informatica
Middelbare school
vwo
Leerjaar 4
CSS - gebruik maken van classes
September 2017
- Les met
19 slides
Informatica
Middelbare school
vwo
Leerjaar 4
HTML + CSS les 3: introductie CSS
April 2023
- Les met
28 slides
Informatica
Middelbare school
vwo
Leerjaar 4
HTML en CSS - document flow en box model
Augustus 2022
- Les met
14 slides
Informatica
Middelbare school
vwo
Leerjaar 4
CSS
Oktober 2024
- Les met
15 slides
Informatica
Middelbare school
havo
Leerjaar 4