Wil ook jij graag eens een onderdeel van kleur of positie veranderen op je eigen website? Het lettertype wat groter, schuin gedrukt en in hoofdletters? Maak kennis met CSS en hoe je het toepast op je eigen website!

Elke website of WordPress thema maakt voor z’n uiterlijk altijd gebruik van CSS, voluit zijn dat Cascading Style Sheets. Deze bestanden zorgen voor opmaak van elementen op de webpagina. Kleuren, positie, animaties en meer. Je leert in deze blogpost het uiterlijk van je eigen website zelf aan te passen.

  1. Wat is CSS?
    1. Opbouw van CSS
    2. CSS inkijken
  2. Waar zet ik mijn aangepaste CSS code?
    1. Childthema style.css
    2. Customizer 
    3. Custom CSS plugin
  3. Handige links

Wat is CSS?

Voordat je CSS kunt begrijpen moet je de basis van HTML onder de knie hebben, die zorgt voor de code waaruit webpagina’s bestaan. Hier lees je meer over HTML.

HTML is de taal waaruit statische webpagina’s gebouwd zijn. Je hebt bvb. de <p> tag voor paragrafen, de <a> tag voor anchor tekst (links) of <br> om een volgende lijn te beginnen (break rule). We gaan er verder niet op in.

CSS is er om de elementen op een webpagina op te maken. Denk aan kleur, grootte, positie, animaties… Elementen kun je op verschillende manieren aanspreken.

  • ID: een unieke naam voor een bepaald stuk op je pagina die je maar éénmaal kunt gebruiken. Denk bijvoorbeeld aan het hoofd van de pagina.
    ID’s worden benaderd door de hashtag:
#header{
background-color: #3ACF37;
}
  • Klassen: een klasse is bedoeld om een herhaaldelijke stijl te geven om een stijl globaal over de website dezelfde opmaak te geven. Voorbeeld: een klasse voor tekst kleur in het groen te plaatsen.
.groen{
color: #3ACF37;
}
  • De tag zelf: stel je wenst alle links op je website in het vet te plaatsen.
a{
font-weight: bold;
}

Opbouw van CSS

CSS werkt zoals HTML ook hiërarchisch. Je moet dus rekening houden dat elementen in een bepaalde volgorde op een pagina staan. Als een element binnen een ander element staat kan het dat de juiste selector iets langer wordt dan gepland.

Om echt CSS grondig te leren kennen zet ik onderaan deze blogpost een lijstje met interessante links.

CSS inkijken

Nu we iets meer weten over wat CSS precies doet en hoe het werkt gaan we over naar het belangrijkste. Zelf zaken aanpassen.

Daarvoor moeten we gebruik gaan maken van de ‘Developer tools‘ in je browser. De meest gebruikte browsers waaronder Chrome, Firefox, Edge hebben deze ingebakken. Je opent deze interface in:

  • Chrome:
    Ctrl+Shift+I of Cmd+Opt+I op Mac
  • Firefox:
    Ctrl+Shift+I of Cmd+Opt+I op Mac
  • Edge:
    Simpelweg F12.

Chrome Developer Tools

Aan de rechterzijde heb je de inspector met de broncode van de webpagina. Als je iets wil aanduiden op de website om er de CSS code van in te zien, werk je best met de handig selectie-tool (linksboven). Als je dit aanzet kun je op je website over elk element gaan met de cursor en klik je éénmaal op het gewenste element. Dan krijg je aan de rechterzijde de eigenschappen van de site. Zie volgend screenshot:
Selectie tool in Developer Tools

Het smartphone/tablet icoontje is ook een leuke toevoeging in Chrome, je kunt hiermee virtueel kijken hoe je website er uit ziet op bvb. een ipad, iphone en zoveel meer toestellen.

Een kleine demo waarin ik toon dat je visueel enkele zaken kunt testen vooraleer ze dan op te nemen.
Aanpassen CSS Demo

Hou ermee rekening dat deze wijzigingen enkel in jouw browser is en dat andere bezoekers hiervan niets te zien krijgen. Het is slechts wanneer je de effectieve CSS code toevoegt aan je website, zoals we in het laatste puntje bespreken, dat het voor iedereen zichtbaar wordt.

Waar zet ik mijn aangepaste CSS code?

Childtheme Style.CSS

Je kunt in WordPress een thema bouwen die zich baseert op een hoofdthema en alles overerft. Een childthema dient om bepaalde stukken van templates of van je stijlen te overschrijven. Maak je hier al gebruik dan weet je dat je extra CSS code gewoon in de style.css kunt plaatsen.

Doe deze wijzigingen niet in de ingebakken editor maar ga aan de slag in een uitgebreide editor op je computer. Denk maar aan Notepad++, Atom Editor, Sublime Text en ga zo maar door! Je maakt immers snel een syntax fout en dit kan problemen veroorzaken op je website.

Customizer

Sinds WordPress 4.7 heb je ook een andere mogelijkheid. Er zijn in de customizer een veld om extra CSS in te vullen. Je hebt nu geen nood meer aan een extra plugin of aan een childthema als je enkel opmaak wilt wijzigen. Via Weergave > Aanpassen of Appearance > Customizer geraak je hierin. Ongeveer het laatste tabje is ‘Extra CSS’. Daaronder heb je een tekstveld waar je de CSS code kunt plakken.

Custom CSS plugin

Voor WordPress 4.7 werd er veel gebruikt gemaakt van een extra plugin om je CSS aan te passen. Dit zit nu ingebakken in WordPress zelf dus is het zeker niet nodig een extra plugin te installeren. Indien je hier nog mee werkt zou je de code kunnen kopiëren naar de Customizer en de plugin verwijderen.

Zelfstudie

  • Codecademy: gratis platform om te leren programmeren.
  • Udemy.com: platform met gigantisch veel cursussen.
  • Lynda.com: gelijkaardig als Udemy, opgekocht door LinkedIn.
  • W3Schools.com: gratis toegang tot veel tutorials en cursussen.

Geavanceerde CSS projecten

Op CodePen.io komen vaak zeer leuke pens voor met een stukje code, vaak zeer goede programmeurs tonen tot wat CSS in staat is, ik soms er enkele leuke op:

Zo zijn er nog tientallen maar deze vond ik persoonlijk zeer leuke.

Conclusie

Je kunt zeker zelf meer dan je denkt, let er altijd op dat je de code altijd controleert vooraleer je die op de website zet. Een lokale omgeving kan altijd interessant zijn voor dit soort veranderingen te testen, maar daar schrijf ik binnenkort ook een blogpost over. Ga aan de slag en bij vragen, reageer hieronder.

Gepubliceerd door Jeroen

Jeroen startte in 2015 JerrixIT, waarbij hij hoofdzakelijk WordPress websites ontwikkelt en beheert, maar besloot in 2017 zelf ook te gaan bloggen. Je bent het resultaat aan het lezen.

Doe mee met de conversatie

1 reactie

  1. Altijd handig HTML, CSS en JavaScript te kennen. Ook als je niet met WordPress werkt. Ik vond teamtreehouse trouwens ook echt een goede bron om het onder de knie te krijgen.

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *