CSS
Afkorting van Cascading Style Sheets
Wat is CSS?
CSS is de taal die de opmaak bepaalt van je website: kleuren, lettertypes, afstanden en hoe pagina's zich aanpassen aan een mobiel scherm. De HTML levert de inhoud, CSS zorgt dat die er goed uitziet.
Veelgestelde vragen over CSS
Hoe voeg ik eigen CSS toe in WordPress?
Dat kan zonder plugin, via het ingebouwde veld voor extra CSS:
- Klassiek thema: ga naar Weergave > Customizer > Extra CSS.
- Blokthema: ga naar Weergave > Editor > Stijlen, klik op de drie puntjes en kies Extra CSS (soms Aanvullende CSS genoemd).
- Plak je code, bekijk het live voorbeeld en klik op Opslaan of Publiceren.
Wil je je CSS los van je thema beheren, bijvoorbeeld omdat je later wilt wisselen? Gebruik dan een plugin als WPCode. Daarmee bewaar je stukjes CSS als aparte snippets die je per stuk aan of uit zet.
Waarom zie ik mijn CSS-aanpassing niet terug op mijn website?
Meestal krijg je nog een oude, opgeslagen versie van je site te zien. Loop deze punten na:
- Leeg de cache van je cachingplugin, zoals WP Rocket of LiteSpeed Cache.
- Ververs je browser met Ctrl+F5 (Windows) of Cmd+Shift+R (Mac).
- Controleer je code op typfouten, een vergeten puntkomma of accolade.
- Klik met rechts op het element en kies Inspecteren. Is jouw regel doorgestreept, dan wint een specifiekere regel uit je thema.
Maak je selector dan specifieker. Gebruik !important alleen als laatste redmiddel, want het maakt latere aanpassingen lastig.
Kan ik niet gewoon het CSS-bestand van mijn thema aanpassen?
Beter niet. Bij elke thema-update wordt het bestand style.css vervangen door de nieuwe versie, en dan ben je al je aanpassingen kwijt. Dit is een van de meest gemaakte fouten.
Veilige alternatieven:
- Gebruik het veld Extra CSS in WordPress voor kleinere aanpassingen.
- Maak een child theme (kindthema) voor grotere wijzigingen. Dat is een apart thema dat alles van je hoofdthema overneemt, terwijl jouw eigen code bewaard blijft bij updates.
Maak vooraf een back-up, bijvoorbeeld met UpdraftPlus, zodat je altijd terug kunt als er iets misgaat.
Hoe pas ik de opmaak alleen aan voor mobiele schermen?
Daarvoor gebruik je een media query: een stukje CSS dat alleen geldt vanaf of tot een bepaalde schermbreedte. Een voorbeeld:
@media (max-width: 768px) { h1 { font-size: 28px; } }
Hiermee worden koppen kleiner op schermen tot 768 pixels breed. Welke breedte je kiest, hangt af van de breekpunten van je thema. Kijk die na in de documentatie of in de bestaande CSS.
Test het resultaat in je browser: klik met rechts, kies Inspecteren en zet de weergave op een mobiel apparaat. Werk je met een paginabouwer zoals Elementor, dan kun je vaak ook per apparaat instellingen aanpassen zonder code.
Maakt veel CSS mijn website trager?
Ja, dat kan. Je browser laadt eerst de CSS voordat de pagina zichtbaar wordt. Thema's, paginabouwers en plugins laden vaak CSS op elke pagina, ook waar die niet nodig is.
Zo pak je het aan:
- Meet je site met PageSpeed Insights en kijk of de melding over ongebruikte CSS verschijnt.
- Verwijder plugins die je niet meer gebruikt.
- Zet in WP Rocket de optie voor het verwijderen van ongebruikte CSS aan, of gebruik de CSS-optimalisatie van LiteSpeed Cache.
- Controleer daarna je belangrijkste pagina's, want agressieve optimalisatie kan de opmaak soms verstoren.
