What is LessonUp
Search
Channels
Log in
Register
‹
Return to search
CSS - selectors
Je weet wat een
css stylesheet
is
Je kan cs
selectors
,
properties
en
values
toepassen op html elementen
1 / 16
next
Slide 1:
Slide
Informatica
Middelbare school
vwo
Leerjaar 4
This lesson contains
16 slides
, with
interactive quizzes
and
text slides
.
Start lesson
Save
Share
Print lesson
Items in this lesson
Je weet wat een
css stylesheet
is
Je kan cs
selectors
,
properties
en
values
toepassen op html elementen
Slide 1 - Slide
HTML + CSS
Dit is wat we nu aan het doen zijn. Onze "lelijke" html gaan we opmaken met css
Slide 2 - Slide
Slide 3 - Slide
Slide 4 - Slide
Slide 5 - Slide
:
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 - Slide
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 - Slide
Specificity
Link naar tutorial
http://htmldog.com/guides/css/intermediate/specificity/
https://codepen.io/timmiekun/pen/yQmNeR
Slide 8 - Slide
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 - Slide
Waar slaat die cascading eigenlijk op?
Slide 10 - Open question
css classnames
Gebruik beschrijvende classnames
Goed: "title", "description", "warning-button"
Fout: "red", "uppercase", "small"
Slide 11 - Slide
Slide 12 - Slide
tot slot nog een wijze raad
~ "Een id (#) gebruiken is niet nodig en kan problemen geven met javascript" ~
Slide 13 - Slide
Huiswerk maandag
https://htmldog.com/guides/css/beginner/
Slide 14 - Slide
Wat vonden jullie van deze les?
A
:)
B
:(
Slide 15 - Quiz
Wat hebben jullie vandaag geleerd?
Slide 16 - Open question
More lessons like this
HTML en CSS - les 2 - wat is css?
August 2022
- Lesson with
15 slides
Informatica
Middelbare school
vwo
Leerjaar 4
HTML en CSS 3 - selectors
January 2019
- Lesson with
13 slides
Informatica
Middelbare school
vwo
Leerjaar 4
CSS en de chrome devtools
February 2020
- Lesson with
11 slides
Informatica
Middelbare school
vwo
Leerjaar 4
HTML en CSS - gebruik maken van classes
August 2022
- Lesson with
17 slides
Informatica
Middelbare school
vwo
Leerjaar 4
CSS - gebruik maken van classes
September 2017
- Lesson with
19 slides
Informatica
Middelbare school
vwo
Leerjaar 4
HTML en CSS - document flow en box model
August 2022
- Lesson with
14 slides
Informatica
Middelbare school
vwo
Leerjaar 4
HTML + CSS les 3: introductie CSS
April 2023
- Lesson with
28 slides
Informatica
Middelbare school
vwo
Leerjaar 4
CSS
October 2024
- Lesson with
15 slides
Informatica
Middelbare school
havo
Leerjaar 4