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
InformaticaMiddelbare schoolvwoLeerjaar 4

This lesson contains 16 slides, with interactive quizzes and text slides.

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

Cascading Style Sheet
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

Slide 14 - Slide

Wat vonden jullie van deze les?
A
:)
B
:(

Slide 15 - Quiz

Wat hebben jullie vandaag geleerd?

Slide 16 - Open question