Onze pagina heeft nu een header en een paragraaf. Nu gaan we een tweede paragraaf toevoegen.
<body> <h1>Mijn eerste website</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium culpa cupiditate distinctio dolores error, eveniet harum in inventore ipsum magnam, quibusdam, vero? Architecto consequuntur dicta esse minima tempore. Fuga, ullam!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ducimus facere illo itaque nobis perspiciatis! Assumenda autem blanditiis cupiditate dolore fugiat illo laudantium magnam quasi qui, quod recusandae sed voluptatibus.</p> </body>
We willen graag de eerste paragraaf met een rode tekstkleur en de tweede in het groen. Hiervoor gaan we in ons CSS bestand twee nieuwe eigenschappen toevoegen.
p.rood { color: red; } p.groen { color: green; }
Deze opmaak kunnen we aan de p
tags toevoegen d.m.v. een class.
<h1>Mijn eerste website</h1> <p class="rood">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium culpa cupiditate distinctio dolores error, eveniet harum in inventore ipsum magnam, quibusdam, vero? Architecto consequuntur dicta esse minima tempore. Fuga, ullam!</p> <p class="groen">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ducimus facere illo itaque nobis perspiciatis! Assumenda autem blanditiis cupiditate dolore fugiat illo laudantium magnam quasi qui, quod recusandae sed voluptatibus.</p> </body>
Onze class="rood"
en class="groen"
kunnen we nu alleen gebruiken voor de p
tag. Als we dit ook voor bijvoorbeeld een h1
tag willen gebruiken kan dat alleen als we in ons CSS bestand het volgende toevoegen.
h1.rood { color: red; }
Om de class="rood"
op elke tag te laten werken kan je in je CSS bestand ook de tag weglaten
.rood { color: red; }
Nu kunnen we ook het volgende doen
<h1 class="rood">Mijn eerste website</h1> <p class="rood">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium culpa cupiditate distinctio dolores error, eveniet harum in inventore ipsum magnam, quibusdam, vero? Architecto consequuntur dicta esse minima tempore. Fuga, ullam!</p>
Vaak is het handig om je CSS flexibel te maken zodat het bij alle tags toepasbaar is.