HTML en CSS - les 2 - wat is css?

  • Je weet wat een css stylesheet is
  • Je kan cs selectors, properties en values toepassen op html elementen
1 / 15
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolvwoLeerjaar 4

In deze les zitten 15 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

:
Waar gaan we dan die css typen?
Je bent al bezig of misschien zelfs al klaar met de html tutorial(s) op htmldog.com. Dat is belangrijk, want we moeten we iets hebben om te stylen.


Met dit stukje code geef je aan welk css bestand we gaan gebruiken.
1
Hier staat het css bestand
2

Slide 6 - Tekstslide

:
Zelf css typen
Als je het bestand opent krijg je alvast wat css te zien (2)

We halen al deze css weg en typen wat anders:




Replit maakt automatisch al een beetje css voor je. Dat halen we weg.
2
Je kan zien dat we het bestand geselecteerd hebben
1
Wat gebeurt er?

Slide 7 - Tekstslide

:
Zelf css typen
Als we de css hebben aangepast en we drukken weer op Run (1) dan zien we dat er wat is veranderd aan onze website (2)
Je ziet dat de tekst in het <p> element groen is geworden en dat de tekst in beide <h2> elementen rood is geworden
2
1

Slide 8 - 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.
green is de value. De waarde die je de property wil geven.
Alles bij elkaar staat hier dat we alle <p> elementen de kleur groen willen geven en all <h2> elementen de kleur blauw.

Slide 9 - Tekstslide

:
3. In een apart css bestand
1. In de html
Drie plekken om css te schrijven
2. In een apart css element
In de tutorial wordt als eerste uitgelegd waar je allemaal css kan typen. Aan gezien wij alleen css in een css bestand gaan typen, en niet inline omdat we geen barbaren zijn, kunnen de andere methoden gewoon overslaan.

Slide 10 - Tekstslide

Opdracht
1. Zorg dat je de html beginners tutorial af hebt
2. Ga aan de slag met de css tutorials
3. Gebruik git voor elke tutorial pagina die je af hebt

Css opdracht staat in classroom. 

Slide 11 - Tekstslide

Ik kan in css een selector voor meerdere elementen maken
A
Dat kan ik!
B
Ik kan dat niet :(
C
Misschien kan ik het een beetje

Slide 13 - Quizvraag


De value in deze code is
A
li
B
border
C
1px solid red

Slide 14 - Quizvraag


De property en de selector zijn dan dus:

Slide 15 - Open vraag