CSS bepaalt hoe je website eruitziet. Kleuren, lettertypen, ruimte, lay-out: het is allemaal CSS. Lees wat het is, hoe het werkt en waarom het belangrijk is voor je merk.
Heb je weleens twee websites bezocht met bijna dezelfde content die er compleet anders uitzien? De ene is verzorgd, netjes en makkelijk te lezen. De andere voelt rommelig, ouderwets en lastig te navigeren. De content kan identiek zijn. Wat ze zo anders maakt, is CSS.
In het vorige hoofdstuk leerde je dat HTML een webpagina structuur geeft. Het vertelt de browser wat alles is: een kop, een alinea, een afbeelding, een knop. Maar HTML heeft zelf geen stijl. Zonder CSS zou elke website eruitzien als een tekstdocument. CSS maakt van die structuur een visuele ervaring.
Wat is CSS?
CSS staat voor Cascading Style Sheets. Het is een taal die de visuele weergave van een webpagina bepaalt. HTML zegt "dit is een kop", CSS zegt "deze kop moet donkerblauw zijn, 32 pixels hoog en dit specifieke lettertype gebruiken". HTML zegt "dit is een knop", CSS zegt "deze knop moet groen zijn, afgeronde hoeken hebben en 20 pixels van de tekst erboven staan".
Elke visuele keuze die je op een website ziet, zoals kleuren, lettertypen, formaten, ruimte, lay-outs, hover-effecten en achtergronden, komt uit CSS. Het is de ontwerplaag van het web.
Hoe werkt CSS?
CSS werkt door HTML-elementen aan te wijzen en er stijlregels op toe te passen. Je vertelt CSS welk element je wilt opmaken en beschrijft dan hoe het eruit moet zien. Die regels staan in een apart bestand dat de browser naast de HTML laadt. Leest de browser beide bestanden samen, dan past hij de stijlen toe op de bijbehorende elementen en toont hij de afgewerkte pagina.
Het deel "cascading" in de naam verwijst naar hoe CSS met conflicten omgaat. Zijn er meerdere stijlregels van toepassing op hetzelfde element, dan volgt CSS een vaste volgorde van prioriteit om te bepalen welke regel wint. Specifiekere regels gaan voor op algemenere. Dankzij dit systeem hebben ontwerpers precieze controle over hoe elk element op de hele website eruitziet.
Soorten CSS
CSS kun je op drie manieren schrijven. Elke manier werkt, maar ze passen niet in elke situatie even goed.
1. Inline CSS
Inline CSS schrijf je direct op één HTML-element. Het werkt alleen op dat ene element en overschrijft alle andere stijlen die erop van toepassing zijn. Het is handig voor snelle, eenmalige aanpassingen, maar wordt een probleem op grotere schaal. Wil je een kleur bijwerken die op 50 elementen wordt gebruikt, dan moet je hem op 50 plekken wijzigen in plaats van op één.
2. Interne CSS
Interne CSS schrijf je in een style-tag in het HTML-bestand zelf, meestal bovenaan de pagina. Het geldt alleen voor die pagina. Dat is prima voor losse pagina's of kleine projecten, maar voor een volledige website betekent het dat je dezelfde stijlen op elke pagina herhaalt. Wijzig je één ding, dan moet je elk bestand afzonderlijk bijwerken.
3. Externe CSS
Externe CSS staat in een apart bestand dat aan je HTML-pagina's is gekoppeld. Dit is de standaardaanpak voor elke echte website. Je legt al je stijlen één keer vast in één bestand en elke pagina die ernaar linkt, neemt die stijlen over. Wijzig je een kleur of een lettertype op één plek, dan wordt het overal direct bijgewerkt. Het is netter, laadt sneller en is veel makkelijker te onderhouden. Bijna elke goed gebouwde website gebruikt externe CSS als basis.
Wat CSS op je website regelt
CSS raakt bijna elk visueel aspect van je website. Dit zijn de belangrijkste gebieden.
Kleuren en achtergronden
Elke kleur op je website, zoals tekstkleur, achtergrondkleur, knopkleur en randkleur, stel je in via CSS. Je merkkleuren worden consistent op de hele site toegepast doordat je ze één keer in CSS vastlegt en overal hergebruikt.
Typografie
Het lettertype van je website, de grootte van je koppen en bodytekst, de ruimte tussen regels en of tekst vet of cursief is: het is allemaal CSS. Goede typografie maakt content makkelijker te lezen en versterkt je merkidentiteit.
Lay-out en ruimte
Hoe kolommen zijn ingedeeld, hoeveel ruimte er tussen secties zit, hoe breed het contentgebied is en waar de zijbalk verschijnt: CSS regelt het allemaal. Lay-outregels bepalen de algemene structuur van elke pagina, verder dan wat HTML biedt.
Responsief gedrag
CSS zorgt er ook voor dat responsive design werkt. Met mediaqueries in CSS vertel je de browser dat hij andere stijlen moet toepassen afhankelijk van de schermgrootte. Op een desktop kan content in drie kolommen staan. Op een telefoon zet CSS die kolommen onder elkaar, zodat alles op het kleinere scherm past.
Animaties en effecten
Hover-effecten op knoppen, vloeiende overgangen tussen secties, content die inzoomt tijdens het scrollen: het is allemaal CSS. Ze geven de ervaring beweging en finesse zonder dat er JavaScript voor nodig is.
Wat dit betekent voor je website als merkeigenaar
Je hoeft geen CSS te schrijven om een goed ontworpen website te hebben. Websitebouwers regelen het voor je. Kies je een template, je merkkleuren en je lettertypen, dan vertaalt het platform die keuzes achter de schermen naar CSS-regels. Elke wijziging die je in de visuele editor maakt, levert CSS op die de browser leest en toepast.
Voor jou telt dat de CSS die je platform maakt netjes en efficiënt is. Zware of opgeblazen CSS vertraagt hoe snel je pagina's laden. Goed geschreven CSS houdt je site snel en consistent op elke pagina. De websitebouwer van WEMASY genereert automatisch geoptimaliseerde CSS, zodat je ontwerpkeuzes netjes worden toegepast zonder je pagina's onnodig zwaarder te maken. Wil je begrijpen hoe dit met prestaties samenhangt, lees dan wat websitesnelheid is en waarom het ertoe doet.
Veelgestelde vragen
Moet ik CSS leren om een website te bouwen?
Nee. Met een websitebouwer bepaal je de look en feel van je site via een visuele editor. Het platform schrijft de CSS voor je. De basis van CSS kennen is handig als je wilt begrijpen waarom dingen eruitzien zoals ze eruitzien, maar je hoeft geen enkele regel te schrijven om met de websitebouwer van WEMASY een professionele website te bouwen.
Wat is het verschil tussen CSS en HTML?
HTML bepaalt de structuur van een webpagina, dus wat elk stukje content is. CSS bepaalt hoe het eruitziet. HTML maakt een kop. CSS geeft die kop een bepaalde kleur, grootte en lettertype. Ze werken samen: HTML levert de elementen, CSS maakt ze op.
Kan CSS de snelheid van een website beïnvloeden?
Ja. Grote, inefficiënte CSS-bestanden maken elke paginalading zwaarder. CSS die niet is geoptimaliseerd, kan de browser ook blokkeren om de pagina te tonen totdat alle stijlen zijn gelezen, waardoor bezoekers je content later zien. Nette, minimale CSS laadt sneller. Daarom is bouwen op een goed geprogrammeerd platform belangrijk voor websitesnelheid.
Wat is een CSS-framework?
Een CSS-framework is een kant-en-klare verzameling CSS-regels die ontwikkelaars als startpunt gebruiken in plaats van alles zelf te schrijven. Het versnelt de ontwikkeling en levert standaard consistente, geteste stijlen. De meeste websitebouwers gebruiken intern een CSS-framework, zodat de templates die ze maken al goed gestructureerd en betrouwbaar zijn.
Kun je met CSS je website er op desktop en mobiel goed laten uitzien?
Ja, en dat is eigenlijk een van de belangrijkste taken van CSS. Met mediaqueries past CSS andere stijlen toe afhankelijk van de schermgrootte. Op een breed desktopscherm kan content in meerdere kolommen met grote afbeeldingen staan. Op een telefoon komen diezelfde kolommen onder elkaar, passen lettergroottes zich aan en wordt de ruimte kleiner zodat alles op het kleinere scherm past. Zo werkt responsive design, en het wordt allemaal via CSS geregeld, zonder aparte mobiele versie van je site.
Wat gebeurt er als CSS niet laadt op een pagina?
Laadt het CSS-bestand niet, dan wordt de pagina nog steeds getoond, maar zonder opmaak. Je ziet platte tekst en afbeeldingen zonder kleuren, lettertypen of lay-out. Alles staat onder elkaar in de volgorde waarin het in de HTML staat. Het ziet er kapot uit, maar de content is technisch gezien nog steeds aanwezig. Dit komt zelden voor bij goed onderhouden platforms, maar het laat zien hoeveel visueel werk CSS stilletjes op elke pagina doet.