Een huisstijl op papier is snel gemaakt. Twee kleuren, een lettertype en een logo. Op een website blijkt dat lastiger vol te houden. De ene knop is net iets donkerder, de andere kop net iets kleiner. Na een half jaar sleutelen lijkt niets meer op het oorspronkelijke ontwerp.
De oorzaak is bijna altijd dat de huisstijl nergens centraal vastligt. Hij zit verspreid over losse instellingen in tientallen blokken.
Bij Dietistenpraktijk Stede Broec pakte ik dat anders aan. Ik maakte daar de huisstijl, het webdesign en de zoekoptimalisatie. De kleuren en lettertypen staan op een plek vastgelegd.
Wil de praktijk later een accentkleur bijstellen, dan verander ik een regel. Die verandering slaat direct door op elke knop, elke kop en elke link. Er is geen pagina die achterblijft, want er is maar een bron.
CSS bepaalt hoe je huisstijl er op het scherm uitziet.
Wat is CSS?
CSS staat voor Cascading Style Sheets. Het is de opmaaktaal van het web. Je bepaalt ermee hoe iets eruitziet, niet wat het is.
Dat onderscheid is de kern van hoe websites gebouwd worden. HTML zegt: dit is een kop, dit is een knop. CSS zegt: koppen zijn donkerblauw en achthonderd zwaar.
Waarom die scheiding handig is
Omdat je de opmaak los kunt wijzigen van de inhoud. Je verandert een regel en je hele site verandert mee. Zonder die scheiding zou je elke pagina apart moeten aanpassen.
Hoe het werkt
Selectors
Je begint met selectors. Dat zijn aanwijzingen die vertellen welk onderdeel je bedoelt. Alle koppen van niveau twee, of alleen de knoppen in je footer.
Daarna geef je eigenschappen mee. Kleur, lettergrootte, afstand, achtergrond. Zo bouw je regel voor regel je kleuren en lettertypen op.
De cascade
Het woord cascading betekent watervalsgewijs. Regels stapelen op elkaar en de meest specifieke wint. Staat er twee keer iets over dezelfde knop, dan telt de precieste aanwijzing.
Dat is logisch als je het weet en verwarrend als je het niet weet. Het verklaart waarom je aanpassing soms niets lijkt te doen.
Meebewegen met het scherm
Met responsive opmaak laat je je ontwerp meebewegen. Op een telefoon staan blokken onder elkaar, op desktop naast elkaar. De grens waarop dat omslaat heet een breakpoint.
Waar zet je het neer?
In WordPress heb je meerdere plekken, en dat is precies het probleem. Ik houd een vaste volgorde aan.
Van eenvoudig naar ingrijpend
De instellingen van je thema, voor kleuren en lettertypen.
Het veld voor eigen CSS in de aanpasser, voor kleine correcties.
Het stijlbestand van je child theme, voor echt maatwerk.
Wat je niet doet, is het originele themabestand bewerken. Dat verdwijnt bij de eerste update, inclusief al je werk.
Waarom je aanpassing niet werkt
Dit is de meest gestelde vraag over dit onderwerp. Er zijn drie gebruikelijke oorzaken.
De eerste is de cascade. Ergens anders staat een preciezere regel die wint van die van jou.
De tweede is opslag. Je ziet nog de bewaarde versie, niet de nieuwe. Meer daarover lees je bij cache.
De derde is een typefout. Een vergeten accolade of puntkomma zet alles daaronder buiten werking.
Hoeveel heb je nodig?
Minder dan je denkt. Ik kom sites tegen met duizenden regels waarvan de helft ongebruikt is. Oude campagnestijlen, resten van verwijderde plugins.
Al die regels worden bij elk bezoek meegeladen. Ik ruim dat daarom periodiek op tijdens onderhoud. Test elke wijziging daarna in meerdere browsers, want niet alles wordt overal gelijk uitgevoerd. Meer daarover lees je bij cross-browser.
Werken met vaste waarden
Ik leg kleuren en maten vast als variabelen. Dat zijn losse waarden met een naam, bijvoorbeeld je accentkleur. In de rest van je opmaak verwijs je naar die naam.
Wil je later iets bijstellen, dan verander je een regel. Alles wat naar die naam verwijst, schuift mee. Zo blijft een huisstijl na jaren nog steeds kloppen.
Zonder die aanpak sluipt er verloop in. Dan staat er op de ene pagina een net iets ander blauw dan op de andere. Niemand ziet waar het vandaan komt en niemand durft het te veranderen.
Meer vragen over CSS
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is CSS en waar gebruik je het voor?
Wat is het verschil tussen HTML en CSS?
Waar zet je je eigen CSS neer in WordPress?
Waarom werkt mijn CSS niet?
Hoeveel CSS heeft een website nodig?
Wat is het verschil tussen CSS en een paginabouwer?
Wat is CSS en waar gebruik je het voor?
HTML zegt wat iets is. CSS zegt hoe het eruitziet. Dat is het hele verschil, en het is fundamenteel voor hoe websites werken.
In HTML schrijf je: dit is een kop van niveau twee, dit is een knop, dit is een lijst. Je legt de betekenis en de structuur vast.
In CSS schrijf je: koppen van niveau twee zijn donkerblauw, veertig pixels groot en vet. Je legt het uiterlijk vast.
Die scheiding heeft nog een tweede voordeel dat vaak vergeten wordt. Hulpsoftware zoals een screenreader leest de HTML, niet de opmaak. Een correcte structuur maakt je site dus ook toegankelijker.
Haal je de CSS weg, dan blijft je pagina volledig leesbaar. Alleen kaal en zwart-wit. Kun je hem dan nog begrijpen, dan is je structuur goed. Dat is een test die ik regelmatig doe.
Doe die test eens op je eigen site. Zet de opmaak uit in je browser en lees de pagina van boven naar beneden. Klopt de volgorde nog?
Wat is het verschil tussen HTML en CSS?
CSS staat voor Cascading Style Sheets. Het is de opmaaktaal van het web. Je bepaalt ermee hoe iets eruitziet, niet wat het is.
Kleuren, lettertypen, afstanden, achtergronden en de indeling van je pagina. Dat regel je allemaal met CSS. Ook het meebewegen met verschillende schermformaten zit erin.
Het grote voordeel is dat opmaak los staat van inhoud. Verander je een regel, dan verandert je hele site mee. Zonder die scheiding zou je elke pagina apart moeten aanpassen.
Daarom leg ik een huisstijl altijd centraal vast. Kleuren en lettertypen staan op een plek. Wil een klant later een accentkleur bijstellen, dan is dat een regel werk.
Die verandering slaat direct door op elke knop, elke kop en elke link. Er blijft geen pagina achter, want er is maar een bron. Meer over de structuur eronder lees je bij HTML.
Leg je huisstijl daarom vast voordat je begint met bouwen. Achteraf uniform maken kost altijd meer tijd dan het vooraf goed neerzetten.
Waar zet je je eigen CSS neer in WordPress?
Er zijn meerdere plekken, en dat is precies waar het misgaat. Ik houd een vaste volgorde aan, van eenvoudig naar ingrijpend.
Begin in de instellingen van je thema. Kleuren en lettertypen kun je daar bijna altijd gewoon kiezen. Dat blijft bewaard bij updates en je hebt geen code nodig.
Werkt dat niet, gebruik dan het veld voor eigen CSS in de aanpasser. Dat is bedoeld voor kleine correcties en het overleeft ook updates.
Gaat het om echt maatwerk, dan hoort het in het stijlbestand van je child theme. Daar kun je structureel werken en netjes commentaar plaatsen.
Wat je nooit doet, is het originele themabestand bewerken. Dat verdwijnt bij de eerste update, inclusief alle uren die je erin stopte. Dat is de klassieke fout die ik het vaakst herstel.
Noteer waar je wat hebt neergezet. Anders zoekt een volgende bouwer zich suf naar die ene regel die alles overschrijft. Een korte notitie in je projectmap is daarvoor al genoeg.
Waarom werkt mijn CSS niet?
Dit is de meest gestelde vraag over dit onderwerp. Er zijn drie gebruikelijke oorzaken en die check ik in deze volgorde.
De eerste is de cascade. Het woord cascading betekent watervalsgewijs. Regels stapelen op elkaar en de meest specifieke wint. Ergens anders staat dus een preciezere regel die het van die van jou wint.
De tweede is opslag. Je ziet nog de bewaarde versie van je pagina, niet de nieuwe. Ververs met ctrl en F5 en leeg daarna je opslag. Meer daarover lees je bij cache.
De derde is een typefout. Een vergeten accolade of puntkomma zet alles daaronder buiten werking. Dat is gemeen, want de fout zelf zie je niet.
Gebruik de ontwikkelaarstools van je browser om te kijken welke regel echt wordt toegepast. Dat scheelt uren giswerk.
Werk van boven naar beneden bij het zoeken. Eerst kijken of de regel er wel staat, dan of hij wint, dan pas of er een typefout in zit.
Hoeveel CSS heeft een website nodig?
Minder dan de meeste sites hebben. Ik kom regelmatig bestanden tegen met duizenden regels waarvan de helft nergens meer gebruikt wordt.
Oude campagnestijlen, resten van een verwijderde plugin, drie versies van dezelfde knop. Al die regels worden bij elk bezoek meegeladen. Individueel stelt het weinig voor, maar samen telt het op.
Een goed opgezette bedrijfssite komt vaak toe met een paar honderd regels. Zeker als je met een centrale set kleuren en maten werkt.
Ik ruim dit daarom periodiek op tijdens onderhoud. Ongebruikte regels eruit, dubbele regels samenvoegen, commentaar erbij zodat het leesbaar blijft.
Test daarna altijd in meerdere browsers. Wat je weghaalt kan ergens anders net nodig zijn geweest. Dat merk je zelden op je eigen scherm, wel op dat van je klant.
Meet het effect van opruimen ook echt. Zonder meting weet je niet of je iets hebt opgelost of alleen iets hebt weggehaald. Bewaar altijd een kopie voordat je begint met weggooien.
Wijkt je website af van je huisstijl, of durf je zelf niets aan de opmaak te veranderen? Stuur me je site via het formulier hieronder. Ik kijk waar je opmaak vandaan komt en of hij centraal is vastgelegd. Vaak kan een klant daarna zelf veilig kleuren bijstellen. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Cascading Style Sheets, stylesheet, opmaaktaal
