CSS is de afkorting van Cascading Style Sheets
CSS is simpel – Als je eenmaal weet hoe je het moet gebruiken…
Maar wat is CSS? De programmeertaal die de basis vormt van het internet en alle websites is HTML. Dat weet bijna iedereen die geïnteresseerd is in het maken van een website. HTML heeft echter maar een beperkt aantal opties voor het ontwerpen van een webpagina. Daarom is er een extra programmeertaal gecreëerd die deze mogelijkheden aanzienlijk vergroot; dat is CSS en maakt nu deel uit van HTML.
CSS kan worden toegepast:
- in een stylesheet
- per object
- per pagina
- in een ‘extra CSS’ pagina van een WordPress thema
Een stylesheet is een klein bestand dat de browser leest, zodat deze de website of bepaalde pagina’s op een bepaalde manier kan weergeven.
Per object betekent dat de webbouwer (ontwerper) een klein stukje code toevoegt aan een specifiek object, zoals een illustratie (blok) of tekst (blok), die de weergave van dat object verandert.
Sommige pagebuilders stellen je in staat om CSS op een specifieke pagina te plaatsen. De code beïnvloedt dan alleen elementen (blokken) die op die ene pagina staan.
De extra CSS-pagina van een thema (bijna elk thema heeft het) stelt de webbouwer in staat om bepaalde functionaliteiten aan de site toe te voegen, of om bepaalde objecten anders weer te geven dan het thema van nature doet.
CSS als toevoeging
We gaan CSS als complete stylesheet niet hier bespreken; mensen die CSS op dat niveau al beheersen, hebben deze uitleg niet nodig, en als je dat wel wilt leren, heb je meer nodig dan we hier vertellen!
De meeste mensen die een website voor een klein bedrijf maken, hebben wat CSS code nodig om kleine wijzigingen aan te brengen in (een deel van) een website. Hoe dat werkt leggen we hier uit.
CSS-code in WordPress – eenvoudige toepassingen
- Een tekst (woord of alinea) vet, cursief maken
- Teksten of illustraties op een bepaalde manier uitlijnen (midden, links, rechts, boven, onder, etc.)
CSS-code voor iets minder eenvoudige aanpassingen
- Minder of minder witruimte onder of boven een kop (H1, H2, H3 of h4)
- Code om het vergrootglas uit WooCommerce te verwijderen. Met CSS kun je bij elk WooCommerce-product het vergrootglas, dat standaard op de afbeelding zichtbaar is, verwijderen.
- Code om de knop ‘verder winkelen’ in de WooCommerce winkelwagen te verwijderen. Er zijn omstandigheden waarin je die knop niet wilt gebruiken. Met CSS kun je de knop ‘verder winkelen’ eenvoudig verwijderen.
- Code om een koptekst op één of meerdere pagina’s een andere kleur of een inspringing te geven. Met CSS-code kun je bepaalde koppen op je pagina een andere kleur geven dan ze volgens het thema zouden hebben. Het kan leuk zijn, of de tekst beter leesbaar maken, om koppen in te springen. Dat kan met CSS,
- Code om een afbeelding optisch te laten ‘groeien’ bij het zweven met de muis. Je kent het effect waarschijnlijk wel; als je met je muis over een afbeelding beweegt, lijkt de afbeelding te groeien. Dat is een mooi en beschaafd effect om je site dynamischer te maken. Het effect is heel makkelijk te bereiken met CSS-code; voor één afbeelding of allemaal tegelijk.
- Code om de gerelateerde producten niet te tonen op WooCommerce. Het gebruiken van gerelateerde producten kan heel handig zijn, maar is soms te druk of ongepast.
- Code om een blok (tekst of afbeelding etc.) te verbergen op een mobiele telefoon Een simpele CSS-code om een specifiek object te verbergen op een mobiele telefoon.
Hoe ‘richt’ je CSS-code op een object?
- Code is vaak gericht op een specifiek thema of object (blok).
- CSS-code heeft zijn eigen spelling (syntax) en bestaat uit bepaalde onderdelen.
De CSS syntax
- Een selector. Een selector is het onderdeel van je website of pagina waar de code op van toepassing is. Dat kan een benaming zijn of een benaming in combinatie met een ID, zoals een pagina ID, zodat alleen de pagina of het onderdeel met die ID aangepast wordt. Er is ook een Class selector. Dat betekent dat je een class naam toepast in de CSS code en diezelfde class naam toekent aan een specifiek object of meerdere objecten. Dat klinkt ingewikkeld, maar je zult later zien dat het heel eenvoudig is.
- Na de selector volgt altijd de declaration (declaratie). De declaratie bestaat weer uit een property (eigenschap) en een value (waarde).
- De declaratie begint en eindigt altijd met een { en }.
Hiernaast zie je een voorbeeld van de schijfwijze van CSS. Dit voorbeeld is van w3schools.com.
H1 wil zeggen de grootste kop (titel) van de pagina. Color is de property en blue (blauw) is de waarde. Kleuren worden meestal aangegeven met een aantal tekens, zoals #ff6347, maar ‘blue’ is ook een geldige waarde.
Font-size is weer een property en 12px (12 pixels hoog) is de waarde. Als je meerdere properties en waardes in één stukje code zet, moet je die scheiden met een ; (punt-komma).
Toelichting van dit voorbeeld:
Als je dit ‘in het echt’ in je extra CSS zou plaatsen, zou de H1 kop van elke pagina van je website blauw worden en zou een hoogte hebben van 12 pixels (wat veel te klein zou zijn voor een kop, dus doe dat niet).
Er is een redelijke kans dat je thema deze code niet accepteert en ‘denkt’ mooi niet, ik laat de kop H1 gewoon zien volgens de instellingen ik in mijn thema heb staan. Ook daar is een oplossing voor. Een oplossing die je vaker nodig zult hebben, als je begint om CSS toe te passen; dan moet je het thema ‘overrulen’.
De oplossing als een CSS-code ‘geweigerd’ wordt door het thema
Deze code wil je graag, maar het resultaat is niet zichtbaar voor de bezoeker:
h1 {color:blue ; font-size: 12px ; }De code verander je een beetje, door !important toe te voegen voor de laatste puntkomma. Dan wordt de CSS-code:
h1 {color:blue ; font-size:12px !important; }Nu heb je kans dat de lettergrootte wel 12px is, maar dat de tekst nog steeds niet blauw is. Dan voeg je !important ook na de kleur blue toe. De CSS-code is dan:
h1 {color:blue !important; font-size:12px !important; }Dit waren alleen voorbeelden van de schrijfwijze van CSS. In het menu vind je CSS voor meerdere WordPress gerelateerde situaties.
CSS Class selector – een uitleg
In het voorbeeld hiervoor zag je een CSS-code voor een specifiek benoembare property van het thema, zoals een kop H1: H1 is dan de property waar de CSS-code op gericht is. Wat vaak voorkomt, is dat je een element dat je zelf creëert, zoals een tekst, kop of afbeelding met CSS wilt aanpassen.
Dat doe je door een ‘class’ te creëren. Nagenoeg elk thema en elke pagebuilder heeft de mogelijkheid om (a) een CSS-code te plaatsen bij Extra CSS en (b) dat wat je wilt aanpassen te voorzien van een ‘class’. Dit wordt duidelijker in het voorbeeld hierna.
Voorbeeld CSS Class
Uitgangspunt: je wilt een kop rood maken, maar alleen enkele koppen, dus niet allemaal. Dat betekent dat je de code die hiervoor besproken is, niet kan gebruiken, want dan zouden alle koppen een andere kleur krijgen. Dit bereik je door een class te gebruiken; waar in het voorbeeld h1 stond, zet je nu een naam die je zelf bedenkt, vooraf gegaan door een . (punt). Die naam moet aan twee voorwaarden voldoen:
- De naam mag niet identiek zijn aan een elders op deze website gebruikte class. Jij hebt die naam misschien niet gebruikt, maar onder de motorkap gebruikt elk WordPress thema en elke builder ook veel class codes. Omdat je niet weet welke classes er al zij, is de oplossing ‘personaliseren’. Elke class die je zelf bedenkt laat je bijvoorbeeld beginnen met je eigen initialen.
- Als je de naam van de CSS class later terugziet, zou de naam je een indicatie moeten geven wat deze class doet. bb-09 zegt je later niets. bb-kop-rood is dan veel duidelijker.
Nu gaan we de CSS code schrijven.
- Je begint met de Class, in dit geval .bb-kop-rood
- Dan altijd een {
- De property, dat is hier color:
- daarna de waarde en dat is red
- Daarachter zetten we voor de zekerheid !important
- Daarna altijd een ;
- As er geen andere property en waarde meer volgt een }
.bb-kop-rood {color:red !important; }CSS Class in je thema* zetten
Noot: * we noemen hier thema, maar je kunt de code ook in een speciale CSS-code plug-in zetten, zoals WPase of WPCode. Dat heeft als voordeel dat de CSS behouden blijft als je van thema wisselt.
De CSS Class toevoegen aan het juiste onderdeel (block of element) van je site
Je opent de pagina of post waar je de titel wilt aanpassen. Daar ga je namelijk de door jou gemaakte CSS class plaatsen. Op de juiste pagina klik je op bewerken (edit in het Engels). Dan kom je in jouw builder. Of dit nu Kadence blocks, Greenshift, Divi, Elementor is, het werkt bij elke builder hetzelfde.
Elk element of block van een goede builder heeft een veld bij Geavanceerd of Opties met de naam: ‘Extra CSS-classes’
Daar zet je de naam van de door jou gemaakte CSS class in, maar zonder de . (punt) aan het begin. Dit is heel belangrijk, anders werkt het niet. Dat ziet er zo uit:
Klik vervolgens op bewaren zodat deze toegevoegde CSS class deel uit maakt van jouw pagina. Nu is de H1 kop waar je de class hebt toegevoegd rood.
Tip 1: aanwijzingen in de CSS code zetten
Het is handig om in elke CSS-code die je gebruikt of bewaard, een aanwijzing te zetten. Deze zet je aan het begin van de code en plaats je zo:
/* Hier plaats je de aanwijzing */
en dan volgt de echte code. Dus de aanwijzing zet je tussen /* ...... */Tip 2: bewaar je CSS code ergens
Het is handig om ergens een notitie te maken van de classes die je gecreëerd hebt, met zowel de code als het doel van de code. Wij bewaren alle door ons toegepaste codes in de (gratis) Simplenote plug-in. Deze heeft het voordeel dat er geen grafische opmaak wordt toegepast, waardoor de code later nog te gebruiken is.
Tip 2: onthoud dat je de effecten backend vaak niet ziet
Soms heeft CSS-code meteen een zichtbaar effect tijdens het editen van een post. Hou er echter rekening mee dat je in veel gevallen pas goed kunt zien of de code z’n werk goed doet, als je de pagina bekijkt zoals de bezoeker deze ziet; frontend.
