CSS voor bloggers

Stel je hebt een geweldig thema gevonden voor je WordPress blog.
Maar… het voldoet net niet helemaal.

Zo staat er bijvoorbeeld geen streep onder een link
Of de afbeelding krijgt een vervelend hok om het plaatje heen.

Misschien is er sprake van een kleur die je net niet mooi vindt, of je bent niet tevreden over de hoogte van een menubalk.

Allemaal zaken die ervoor zorgen dat je steeds tegen wat beperkingen aanloopt van het theme.

Je kunt je erbij neerleggen, maar je kunt er ook wat aan doen.

Door CSS te leren.

CSS? Wat dat is? CSS voor bloggers? Wat moet ik daar mee?

CSS zijn Cascading Style Sheets.

Ja nu zijn we nog niet veel verder.

Om even kort uit te leggen, dit zijn de bestanden die de layout van je blog regelen.
Een of meerdere bestanden die ervoor zorgen dat je website er fraai uitziet.

Je regelt er de lettertypes mee, de kleuren van je site, de groottes van bijvoorbeeld de sidebar of het menu.

Als je op je telefoon kijkt zie je waarschijnlijk een andere layout dan wanneer je op een computerscherm naar je blog kijkt. Ook dit wordt geregeld met CSS.

Cascading betekent zoiets als waterval. CSS maakt gebruik van overerving. Dit mag je nu even vergeten, maar als je al een klein beetje weet van CSS en je wilt precies weten hoe het zit met Cascading, lees dan mijn artikel van jaren geleden eens: CSS selectors.

Style staat simpelweg voor stijl en Sheets voor blad. Een stijlblad dus.

HTML is de motor, CSS bepaald hoe de website er uit ziet.

Er is met versie 3 heel wat mogelijk als het gaat om CSS. In dit artikel wil ik de basis met je doornemen.

Wat bespreek ik in dit artikel?

1. Hoe je de CSS aan kunt passen in een WordPress theme
2. Welke belangrijke CSS onderdelen er zijn om aanpassingen in te doen
3. Hoe je CSS schrijft

Onderaan dit artikel vind je een gratis Ebook.

Hoe kun je CSS aanpassen in een WordPress theme?

WordPress heeft het je eenvoudig gemaakt. Tegenwoordig hoef je niet meer in een CSS bestand van een thema te werken. Je kunt extra CSS toevoegen. Eerder was daar een plugin voor, maar tegenwoordig kun je in het onderdeel weergave, bij Customizer een extra tabje CSS vinden.

Klik op weergave en dan op customizer

Kies daarna voor ‘extra CSS’,

Extra CSS in deCustomizer optie

En dan staat er dit veld in beeld:

Extra CSS, invoer veld in het WordPress theme

je krijgt overigens direct in beeld te zien welke aanpassingen je doet. Je kunt gewoon proberen waar je zin in hebt. Zolang je niets publiceert zal een bezoeker geen aanpassingen op je website zien.

Maar wat kun je dan precies aanpassen? Wat is er mogelijk?

CSS schrijven is niet heel ingewikkeld. Je moet allereerst even snappen hoe een CSS code is opgebouwd.
Eerst geef je aan met de ‘selector‘ waar je iets aan wilt gaan veranderen.
Bijvoorbeeld je wilt een koptekst aanpassen. De kopteksten staan in HTML met de code <h1>Dit is een koptekst</h1>. Alles wat tussen de twee h1 codes staat is een koptekst.
Die h1, dat is de selector.
Vervolgens plaats je achter de selector een accolade ({).
Aan het einde sluit je weer met een accolade (}). Tussen de twee accolades schrijf je wat er moet gebeuren met behulp van declaraties (declarations).
Elke declaratie heeft een property (een eigenschap), en een value (een waarde). Die propertye geeft aan wat je wilt veranderen, bijvoorbeeld als je de kleur wilt veranderen gebruik je de property ‘color’. Bij value geef je aan welke kleur het moet worden, bijvoorbeeld ‘blue’ (blauw).
Zoals je ziet wordt alles in logisch Engels gedaan.
Ons voorbeeld:

Met CSS is alles mogelijk, niet alles is nuttig. Laten we het daar maar op houden. Om toch wat orde in de chaos te scheppen een achttal voorbeelden op basis van veel gebruikte CSS tags.

background

Met background regel je zaken voor de achtergrond. Je kunt bijvoorbeeld een hele website een achtergrondkleur meegeven, maar je kunt ook een afbeelding is achtergrond doen.

Zo heb ik een artikel waarin ik een onderdeel heb staan met praktische tips. Dit onderdeel heb ik geplaatst in een ‘div’. Dit is een html tag voor een apart gedeelte van een tekst. Dat heb ik als volgt gedaan:

Je ziet hier dat ik het stukje tekst een class heb meegegeven. Om het voorbeeld duidelijk te maken heb ik een voorbeeld gemaakt van een blokje met praktische tips.

Zoals je ziet is er niks gebeurd en staat deze onzintekst gewoon in de rest van de tekst.

De class ga ik gebruiken in de CSS code. Dat doe ik zo:

.praktisch {...}

Merk op dat er voor ‘praktisch’ een .(punt) staat. Daarmee geef je in CSS aan dat deze aanpassing geldig is voor alle onderdelen die als class de naam ‘praktisch’ hebben meegekregen.

Nu gaan we daar css declaraties aan toevoegen die te maken hebben met background, de achtergrond.
Onze css code wordt dan als volgt:

.praktisch {
background-color: #DDD;
}

border

We gaan ook een rand toevoegen, een border. Deze maken we iets donkerder dan de achtergrond kleur.

.praktisch {
background-color: #DDD;
border: 3px solid #999;
}

Het resultaat wordt nu als volgt:

margin

We gaan nu wat ruimte maken om het tekstblok heen zodat het blok praktisch wat meer gaat opvallen. Dat doe je met margin.
Even voor de duidelijkheid, wat is margin en padding? Daarvoor moet je even weten wat het boxmodel is.

Boxmodel

Een website is verdeeld in blokken. Deze blokken hebben een bepaald formaat. Dit formaat kun je aanpassen met hoogte en breedte. De ruimte om zo’n blok heen (in ons voorbeeld dus het blok ‘praktisch’, dat noem je margin. Vervolgens heb je de rand van het blok zelf (border), daarna krijg je de ruimte binnen deze rand, dat noem je padding en tenslotte krijg je de inhoud van het blok zelf, dus de tekst of een afbeelding.

Het boxmodel, margin, border, padding en inhoud

We voegen de volgende code dus toe aan CSS.

.praktisch {
background-color: #DDD;
border: 3px solid #999;
margin: 10px;
padding: 10px 5px;
}

padding

Je ziet dat ik margin 10px heb meegegeven, dus 10 pixels aan ruimte om het blok heen. Wanneer je 1 getal gebruikt dan wordt de ruimte aan alle zijden 10 pixels.
Bij padding heb ik twee cijfers staan. Het eerste cijfer regelt de ruimte aan de boven en onderkant, het tweede getal aan de linker- en rechterkant.
Dit wordt het resultaat:

font

Met de stijl font kun je allerlei aanpassingen doen aan het lettertype. Denk aan vetgedrukt, schuingedrukt, soort lettertype, grootte enzovoort. Op deze pagina kun je een aantal lettertype aanpassingen uitgelegd vinden.

Voor ons tekstblok gaan we de tekst schuingedrukt en wat kleiner maken (90% van de originele tekst).

.praktisch {
background-color: #DDD;
border: 3px solid #999;
margin: 10px;
padding: 10px 5px;
font-style: italic;
font-size: 90%;
}

Met dit als resultaat:

In het tekstblog staat ook nog een koptekst (h3). Deze wil ik de kleur rood meegeven, dus ik voeg nog een regel toe:

.praktisch {
background-color: #DDD;
border: 3px solid #999;
margin: 10px;
padding: 10px 5px;
font-style: italic;
font-size: 90%;
}
.praktisch h3 {
color: red;
}

Je ziet dat ik er een nieuwe selector aan heb toegevoegd die specifiek iets regelt voor de koptekst (h3) in het blok met de naam praktisch.

Met dit als resultaat:

text-decoration

Het laatste wat ik wil toevoegen is een link. Deze link kunnen we ook weer opmaken. Ik wil dat er een lijn onder komt te staan. Als je er over heen gaat met de muis dan wil ik dat de lijn verdwijnt en de letters vetgedrukt worden.

De extra code die ik toevoeg is de volgende:

.praktisch a {
color: green;
}
.praktisch a:hover {
color: red;
}

Regel 4 waar je :hover toevoegt aan de selector regelt wat er gebeurt als je met je muis over de tekst gaat. Probeer het maar in onderstaand voorbeeld.

Om meer aanpassingen te doen in de CSS van je theme kun je beter aan de slag gaan met een Child theme. Een child theme gebruikt het originele thema als basis en verder kun je er aanpassingen in doen die je maar wilt. Hier zal ik in een ander artikel aandacht aan besteden.

Voor meer voorbeelden kun je hieronder mijn ebook downloaden. Hierin beschrijf ik nog meer voorbeelden die je met CSS kunt bereiken, zowel rechtstreeks in een artikel als op de manier zoals hierboven is beschreven.
Meld je daarvoor even aan voor mijn nieuwsbrief, je krijgt dan het ebook en de wekelijkse HTML-site nieuwsbrief!