H8 - Id's en classes

Tot nu toe heb je vooral CSS geschreven voor gewone HTML-tags, zoals p, h1, section en article. Soms wil je niet alle elementen van hetzelfde soort aanpassen, maar alleen één specifiek element of een bepaalde groep elementen.

p {
    color: black;
}

Deze CSS geldt voor alle alinea's. Dat is niet altijd wat je wilt. Met class en id kun je elementen een naam geven.

• Een class gebruik je voor een groep elementen.
• Een id gebruik je voor één uniek element.
• In HTML schrijf je class="naam" of id="naam".
• In CSS spreek je een class aan met een punt: .naam.
• In CSS spreek je een id aan met een hekje: #naam.

Een class is een naam die je aan één of meer HTML-elementen geeft. Elementen met dezelfde class kun je daarna tegelijk vormgeven met CSS.

<p class="intro">Welkom op mijn website.</p>
<p>Dit is een gewone alinea.</p>
<p class="intro">Deze alinea hoort ook bij de introductie.</p>

.intro {
    font-size: 20px;
    color: darkblue;
}

• De twee alinea's met class="intro" krijgen dezelfde stijl.
• De gewone alinea zonder class wordt niet door .intro geraakt.
• Een class mag meerdere keren op dezelfde pagina voorkomen.
• Daarom gebruik je classes vaak voor herbruikbare vormgeving.

In HTML schrijf je de class zonder punt. In CSS gebruik je juist wel een punt.

<article class="kaart">
    <h2>Nieuws</h2>
    <p>Vandaag leren we werken met classes.</p>
</article>

.kaart {
    padding: 24px;
    border: 1px solid gray;
    background-color: white;
}

• In HTML: class="kaart".
• In CSS: .kaart.
• De punt hoort dus niet in de HTML.
• De punt hoort wel in de CSS-selector.

Dit is een veelgemaakte fout:

<article class=".kaart">
    <h2>Fout voorbeeld</h2>
</article>

In HTML schrijf je geen punt in de classnaam.

Een element mag meerdere classes hebben. Je zet dan meerdere classnamen in hetzelfde class-attribuut, gescheiden door spaties.

<p class="melding belangrijk">De deadline is vandaag.</p>

.melding {
    padding: 16px;
    border: 1px solid gray;
}

.belangrijk {
    color: darkred;
    font-weight: bold;
}

• Deze alinea heeft de class melding.
• Deze alinea heeft ook de class belangrijk.
• Beide CSS-regels kunnen dus invloed hebben op hetzelfde element.
• Zo kun je stijlen combineren zonder alles opnieuw te schrijven.

Een id is een unieke naam voor één element op de pagina. Je gebruikt een id als je één heel specifiek onderdeel wilt herkennen.

<h1 id="hoofdtitel">Mijn website</h1>

#hoofdtitel {
    color: navy;
    text-align: center;
}

• Een id mag maar één keer op dezelfde pagina voorkomen.
• In HTML schrijf je id="hoofdtitel".
• In CSS gebruik je een hekje: #hoofdtitel.
• Gebruik een id dus niet voor herhaalde onderdelen.

Een id kun je ook gebruiken als anker op dezelfde pagina. Daarmee kun je linken naar een specifieke plek binnen de pagina.

<nav>
    <a href="#contact">Ga naar contact</a>
</nav>

<section id="contact">
    <h2>Contact</h2>
    <p>Stuur ons een bericht.</p>
</section>

• De link heeft href="#contact".
• De section heeft id="contact".
• Als je op de link klikt, springt de browser naar dat onderdeel.
• Dit werkt omdat de naam na het hekje gelijk is aan de id.

De meeste vormgeving doe je met classes. Een id gebruik je alleen als iets echt uniek is.

• Gebruik een class voor onderdelen die vaker kunnen voorkomen.
• Gebruik een id voor één unieke plek op de pagina.
• Gebruik een id voor ankerlinks binnen dezelfde pagina.
• Gebruik liever geen id voor gewone herbruikbare CSS-opmaak.

<article class="kaart">
    <h2>Nieuws</h2>
    <p>Een kaart kan vaker voorkomen.</p>
</article>

<section id="contact">
    <h2>Contact</h2>
    <p>Dit is één specifieke plek op de pagina.</p>
</section>

In dit voorbeeld is kaart een class, omdat je meerdere kaarten kunt hebben. contact is een id, omdat die plek maar één keer op de pagina staat.

Kies namen die duidelijk maken wat het onderdeel is of welke rol het heeft. Gebruik liever geen namen die alleen beschrijven hoe iets eruitziet.

• Goed: intro, kaart, melding, contact.
• Minder handig: rood, groot, linksblokje.
• Gebruik kleine letters.
• Gebruik geen spaties in classnamen of id's.
• Gebruik bij meerdere woorden een streepje, bijvoorbeeld belangrijke-melding.

<p class="belangrijke-melding">Let op: de planning is gewijzigd.</p>

.belangrijke-melding {
    padding: 16px;
    border-left: 4px solid orange;
}

CSS-regels kunnen tegelijk op hetzelfde element passen. Dan moet de browser kiezen welke regel wint. Dat heet specificiteit. Voor nu hoef je alleen deze eenvoudige volgorde te kennen:

• Een tag selector is vrij algemeen, bijvoorbeeld p.
• Een class selector is specifieker, bijvoorbeeld .intro.
• Een id selector is nog specifieker, bijvoorbeeld #hoofdtitel.

<p id="eerste-alinea" class="intro">Welkom op de website.</p>

p {
    color: black;
}

.intro {
    color: blue;
}

#eerste-alinea {
    color: red;
}

De tekst wordt rood, omdat de id selector specifieker is dan de class selector en de tag selector.

Gebruik dit niet als truc om CSS ingewikkeld te maken. Houd selectors zo eenvoudig mogelijk.

• Een punt in de HTML zetten: class=".kaart". Dat moet class="kaart" zijn.
• Een punt vergeten in CSS: kaart { ... }. Dat moet .kaart { ... } zijn.
• Een hekje vergeten bij een id selector: hoofdtitel { ... }. Dat moet #hoofdtitel { ... } zijn.
• Dezelfde id meerdere keren gebruiken op één pagina.
• Een class gebruiken met spaties in de naam, zoals class="grote melding", terwijl je eigenlijk één naam bedoelt.

<!-- Dit zijn twee classes: grote en melding -->
<p class="grote melding">Let op.</p>

<!-- Dit is één classnaam -->
<p class="grote-melding">Let op.</p>

Spaties in het class-attribuut betekenen dus: meerdere classes.

• Gebruik classes voor de meeste CSS-opmaak.
• Gebruik id's alleen voor unieke onderdelen of ankerlinks.
• Kies duidelijke namen die iets zeggen over de rol of inhoud.
• Gebruik kleine letters en streepjes.
• Maak selectors niet onnodig lang.
• Gebruik niet overal id's om CSS sterker te maken.
• Controleer goed of de naam in HTML exact gelijk is aan de naam in CSS.