Wat is CSS?

CSS staat voor Cascading Style Sheets, maar dat is waarschijnlijk nog steeds abracadabra voor je. Iets simpeler gezegd is CSS een programmeertaal waarmee je een website kunt opmaken.

WordPress thema’s bevatten allerlei codes. Met HTML en CSS kan er aangegeven worden hoe bepaalde elementen eruit komen te zien.

In elk WordPress thema is een style.css bestand te vinden. Hierin staan allerlei regels CSS code die bepalen hoe een WordPress website eruit ziet.

CSS is een programmeertaal dat niet ontzettend moeilijk te leren is, dit komt omdat eigenlijk veel codes voor zich spreken. Er zijn honderden websites met CSS tutorials om beginners te helpen de taal te ontdekken.

Doordat het relatief eenvoudig is kun je veel code vaak al door het lezen ontcijferen en wellicht zelfs al aanpassen.

Hoe werkt CSS precies?

CSS zorgt dus voor de opmaak, maar om elementen verschillend op te maken moet er natuurlijk wel een manier zijn om je op specifieke elementen te richten. Je kunt dit doen door de HTML codes die gebruikt worden.

Elk HTML element is via CSS apart vorm te geven. Daarnaast worden vaak ook classes (class=) en identificeerders (id=) gebruikt om verschillende secties vorm te geven met CSS. Zo kun je dezelfde HTML elementen op verschillende manieren vormgeven, afhankelijk van waar het op de website staat.

Het is denk ik wel tijd voor een voorbeeld van een stukje CSS code.

body {
background: #f0f0f0;
color: #2e2e2e;
font-family: "Droid Sans", "Helvetica Neue", Helvetica, Arial, serif;
font-size: 16px;
line-height: 26px;
position: relative;

a {
color: #ae2525;
text-decoration: none;
}

a:hover {
color: #941f1f;
}

De body geeft eigenlijk altijd het standaard lettertype en grootte weer op een website. In dit geval zie je bij font-family dat Droid Sans als standaard lettertype wordt gebruikt. Mocht er iets zijn waardoor het niet weergegeven kan worden, dan wordt er overgeschakeld op Helvetica Neue. De grootte van het lettertype dat wordt aangehouden is 16 pixels.

Weer iets heel anders is de “a” die je ziet staan. Hiermee kun je je richten op de links die op de website worden weergegeven. In dit geval wordt aangegeven welke kleur een link moet hebben en in welke kleur de link moet veranderen wanneer iemand er met zijn of haar muis overheen gaat (hover effect).

Tot zover een korte introductie wat CSS nou eigenlijk is. Wil je iets aan de opmaak van je website veranderen, dan zal je dus met CSS aan de slag moeten gaan. In WordPress is het wel verstandig om in een child theme te werken als je met CSS aan de slag gaat.