HTML en CSS - gebruik maken van classes

• Informatica
• Middelbare school
• vwo
• Leerjaar 4

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

Ik weet wat ik in de les kan doen

1. Dat weet ik
2. Dat weet ik niet
3. Dat weet ik ongeveer

Ik weet hoe ik html moet schrijven

1. Dat weet ik
2. Dat weet ik niet
3. Dat weet ik ongeveer

Ik begrijp het verschil tussen html en css

1. Ik begrijp dat
2. Ik begrijp dat een beetje
3. Ik begrijp dat niet

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!

Je moet hier klikken!

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

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