CSS - gebruik maken van classes

• Informatica
• Middelbare school
• vwo
• Leerjaar 4

• Je kan specifieke elementen stylen m.b.v. classnames in css

Stel ik wil allen <li> elementen een groene onderstreping geven. Dat doe ik door

{ border-bottom: 2px solid green; }

te gebruiken. Maar ik mis de selector. Schrijf de volledige code..

Welke kleur heeft de p in de div?

Welke kleur heeft de p in de div?

https://codepen.io/timmiekun/pen/YRaNjy

1. blauw
2. oranje
3. groen
4. rood

Deze groen

Deze rood

Classnames

Bekijk de html

Hoe kan je ervoor zorgen dat de ene li groen wordt onderstreept wordt maar de andere rood?

Deze groen

Deze rood

Classnames

Oplossing?

De li kunnen we groen maken door deze css te gebruiken:

Maar dan worden alle <li> elementen groen..

Oplossing!

gebruik een classname! Of twee!

Deze groen

Deze rood

Classnames

Classnames kan je eindeloos herbruiken!

Het is nu heel makkelijk om alle

belangrijke tekst groen te maken. Je

voegt in de html simpelweg de classname toe en de rest gebeurt vanzelf!

Maak de opdracht bij de onderstaande replit. Dat doe je door op het linkje te klikken en dan op Fork repl te klikken.

https://replit.com/@TimLogtenberg/ClassNames#index.html

Inleveren over ongeveer 10 minuten in LessonUp

Opdracht

Lever het replit linkje in voor de opdracht over classes

Dan nog even dit

In de tutorials van htmldog leer je dat je classes en id's kan gebruiken.

Het gebruik van id's gaan wij niet doen. Een id gebruik je voor andere dingen..

Afkijken

Pedagogisch didactisch gezien moet ik zeggen dat ik jullie leer code te lezen en te interpreteren. Maar eigenlijk laat ik jullie zien hoe je moet afkijken ;)

Chrome devtools

• Open chrome
  
• Ga naar nos.nl
• Druk op F12 of..
• Rechtermuisknop -> inspect element

Filmpje!

https://www.youtube.com/watch?v=VYyQv0CSZOE

Opdracht

Pas de titel aan van een nieuwsbreicht op nos.nl

Huiswerk

• https://htmldog.com/guides/css/intermediate/
• Klaar? Dan doe je Flexbox froggy
• Klaar? Dan begin je aan PO: ICT Website

Gedrag

Opmaak

Data

Beheer

Wat kon er beter aan deze les?

Vriend en vijand van elke developer: browsers!

lgg