Zelfde HTML tags met eigen opmaak

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.