Wat is CSS? Een uitleg voor beginners
CSS is een cruciaal bouwblok binnen front-end website development (samen met HTML en JavaScript). Zonder CSS zouden webpagina’s er kaal, saai en onaantrekkelijk uit zien.
In dit artikel ga ik je precies vertellen wat CSS is, hoe het werkt, hoe je het kunt leren en meer.
Laten we gaan beginnen.
Wat is CSS?
CSS (afkorting voor Cascading Style Sheet) wordt gebruikt om het uiterlijk van website elementen te bepalen die zijn geschreven in een markup language zoals HTML. Het scheidt de content van een website van de visuele opmaak ervan.
Waarom je site CSS nodig heeft
Het verschil van een website met en zonder CSS is als dag en nacht. Je zult wel eens op een site geland zijn waar iets fout zat met het CSS bestand, waardoor het niet kon laden. Wat je dan aantrof was uitgestrekte zwarte en blauwe tekst op een witte achtergrond. De content is nog steeds leesbaar, maar je zal het met me eens zijn dat het er verre van aantrekkelijk uit zag.
Met CSS kun je alle stilistische onderdelen van een site huizen binnen een apart bestand. Dit bestand laad je vervolgens boven op de HTML markup. Dit zorgt ervoor dat de HTML markup een stuk “schoner” en gemakkelijker te onderhouden is.
CSS: een korte geschiedenis
CSS werd kort na HTML ontwikkeld door het World Wide Web Consortium (W3C) in 1996. De reden: HTML was nooit bedoelt om tags te hebben die het uiterlijk van een webpagina zouden bepalen. Het was slechts bedoelt om de markup voor een pagina te schrijven.
Toen HTML beschikking kreeg over tags zoals <font> maakte dit het leven voor veel developers zeer lastig. Aangezien websites kunnen beschikken over meerdere fonts, gekleurde achtergronden en andere esthetische elementen, was het een ramp om dit voor ieder element apart aan te moeten geven via tags.
Om dit op te lossen werd CSS geïntroduceerd. HTML en CSS zijn innig met elkaar verbonden. HTML is de markup language (en vormt hiermee het fundament van een webpagina). CSS daarentegen bepaalt de stijl en het uiterlijk.
Lang verhaal kort: met CSS hoef je niet aldoor aan te geven hoe ieder individueel element oogt. Hierdoor bespaar je jezelf tijd, krijg je schonere code en kun je de code eenvoudiger onderhouden.
Kun je een webpagina de lucht in krijgen zonder CSS? Ja. Maar het resultaat hiervan ziet er, zoals we al besproken hebben, bijzonder onappetijtelijk uit.
Hoe werkt CSS?
CSS gebruikt een eenvoudige, op de Engelse taal gebaseerde syntax met een stel vaste regels. Als eerder besproken was HTML nooit bedoelt om een bepaalde stijl aan elementen toe te voegen. Het was slechts bedoelt om de content aan te duiden. Bijvoorbeeld, hiermee geef je aan dat je een afbeelding wilt plaatsen op je webpagina: <img>https://www.afbeelding.com</img>.
Maar wat nou als je bijvoorbeeld een rand wilt toevoegen aan deze afbeelding? De CSS syntax structuur is vrij eenvoudig. Je hebt een selector en een declaration block. Je selecteert het element en geeft vervolgens aan wat je er mee wilt doen.
In de praktijk kan dit er zo uit zien:
In dit geval geeft de CSS code aan dat de afbeelding geen “harde rand” moet hebben (border: none), maar wel dat de afbeelding een schaduw moet hebben.
Zoals je ziet, is dit alles relatief voor de hand liggend. Het enige wat je onder de knie moet krijgen is het vocabulaire en de regels rondom de { en ; tekens.
CSS leren
Je kunt jezelf de basis van CSS aanleren binnen enkele uren. Gezien het zo’n cruciale bouwsteen is binnen website development, is het de moeite waard dit te doen als je websites wilt gaan ontwikkelen.
YouTube is een goed beginpunt. Maar Codeacademy is ook een uitstekend platform wat een net iets beter gestructureerde leeromgeving biedt.
Hier vind je een compleet overzicht van alle CSS syntax.
CSS gebruiken met WordPress
Als je een website maakt met WordPress heb je in principe geen kennis van CSS nodig. Toch kan het op een gegeven ogenblik zo zijn dat je bepaalde onderdelen van je site wilt stylen op een manier die je WordPress theme niet toelaat.
Wat nu?
Gelukkig biedt CSS hier uitkomst. Bij de meeste WordPress themes tref je in de customizer het kopje “Additional CSS” aan.
Klik hierop en je kunt zoveel van je eigen CSS toevoegen als je maar wilt:
Dit is dé manier om je website net dat tikkeltje extra persoonlijkheid te bieden.
Veel gestelde vragen
Moet ik CSS snappen wanneer ik een website wil maken?
In principe niet. Wanneer je een site maakt met een CMS als WordPress of een website maker, heb je geen enkele kennis van CSS nodig.
Toch is de kans behoorlijk dat vroeg of laat je de beginselen van CSS wilt begrijpen. Dankzij CSS kun je het uiterlijk van je site namelijk net een slagje unieker maken. En verschillende elementen er precies uit laten zien zoals je wilt.
Is het moeilijk om CSS te leren?
Niet echt. Met een paar uur oefenen moet je al behoorlijk ver kunnen komen als het gaat om de basis principes van CSS. Het internet stikt van de gratis resources die je hiermee kunnen helpen.
Voor complexe site lay-outs kun je er wel op rekenen dat dit moeite gaat kosten om onder de knie te krijgen.
Moet ik kennis van HTML hebben voordat ik mezelf CSS aanleer?
Dit is niet nodig. Je kunt eerst CSS leren, en dan HTML, of omgekeerd. Wanneer je een van de twee snapt, wordt het leren van de ander een slagje eenvoudiger, omdat de syntax van HTML en CSS erg op elkaar lijken.
