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

In deze les zitten 16 slides, met interactieve quizzen en tekstslides.

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

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

Slide 14 - Tekstslide

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

Slide 15 - Quizvraag

Wat hebben jullie vandaag geleerd?

Slide 16 - Open vraag