HTML en CSS leren: Class en id
Class en id
"Alleen de prijzen in het groen", zegt Gino, "niet de namen van de diensten." Maar het zijn allemaal `<span>`'s. Hoe kies je er maar een paar?
Een class
In de HTML hebben de prijzen een class: <span class="prijs">. Dat is een etiket dat je zelf kiest.
In CSS vind je alles met dat etiket met een punt ervoor: .prijs. Een class mag op zoveel elementen als je wilt, ook op elementen van een andere soort.
Let op: hoofdletters tellen. .Prijs vindt niets.
<!DOCTYPE html><html lang="nl"> <head> <title>Kapsalon Knip & Krul</title> <link rel="stylesheet" href="basis.css"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1 id="naam">Knip & Krul</h1> <p class="slogan">Kapsalon in hartje Genk</p> </header> <main> <h2>Onze prijzen</h2> <ul class="prijslijst"> <li><span class="dienst">Knippen</span> <span class="prijs">€ 28</span></li> <li><span class="dienst">Wassen en föhnen</span> <span class="prijs">€ 22</span></li> <li><span class="dienst">Kleuren</span> <span class="prijs">€ 55</span></li> </ul> <section id="afspraak"> <h2>Afspraak maken</h2> <p class="uitleg">Bel ons of loop gewoon even binnen.</p> <a class="knop" href="tel:+3289000000">Bel ons</a> </section> </main> <footer> <p>Stationsstraat 8, Genk</p> </footer> </body></html>.prijs { color: #2a9d8f; font-weight: bold;}Een id
Een id is een naam voor één enkel element. Op deze pagina heeft de kop id="naam" en het afsprakenblok id="afspraak".
In CSS schrijf je een id met een hekje: #naam. Een id komt maar één keer voor op een pagina.
Dus: een class voor wat vaker voorkomt, een id voor iets wat er maar één keer is.
<!DOCTYPE html><html lang="nl"> <head> <title>Kapsalon Knip & Krul</title> <link rel="stylesheet" href="basis.css"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1 id="naam">Knip & Krul</h1> <p class="slogan">Kapsalon in hartje Genk</p> </header> <main> <h2>Onze prijzen</h2> <ul class="prijslijst"> <li><span class="dienst">Knippen</span> <span class="prijs">€ 28</span></li> <li><span class="dienst">Wassen en föhnen</span> <span class="prijs">€ 22</span></li> <li><span class="dienst">Kleuren</span> <span class="prijs">€ 55</span></li> </ul> <section id="afspraak"> <h2>Afspraak maken</h2> <p class="uitleg">Bel ons of loop gewoon even binnen.</p> <a class="knop" href="tel:+3289000000">Bel ons</a> </section> </main> <footer> <p>Stationsstraat 8, Genk</p> </footer> </body></html>#naam { color: crimson;}#afspraak { text-align: center;}Probeer het zelf
Maak alle prijzen vet en petrolgroen (#2a9d8f), zonder de diensten te veranderen. En geef de naam bovenaan, met id naam, de kleur crimson.
/* Jouw CSS komt hier. */<!DOCTYPE html><html lang="nl"> <head> <title>Kapsalon Knip & Krul</title> <link rel="stylesheet" href="basis.css"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1 id="naam">Knip & Krul</h1> <p class="slogan">Kapsalon in hartje Genk</p> </header> <main> <h2>Onze prijzen</h2> <ul class="prijslijst"> <li><span class="dienst">Knippen</span> <span class="prijs">€ 28</span></li> <li><span class="dienst">Wassen en föhnen</span> <span class="prijs">€ 22</span></li> <li><span class="dienst">Kleuren</span> <span class="prijs">€ 55</span></li> </ul> <section id="afspraak"> <h2>Afspraak maken</h2> <p class="uitleg">Bel ons of loop gewoon even binnen.</p> <a class="knop" href="tel:+3289000000">Bel ons</a> </section> </main> <footer> <p>Stationsstraat 8, Genk</p> </footer> </body></html>body { margin: 0; padding: 0 16px;}Klaar voor meer?
De volledige les heeft 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.
Begin aan de les