Wat is CSS en hoe het samen met HTML je website mooi maakt

Wat is CSS? De korte versie van het antwoord op deze vraag is: CSS gebruik je om je website mee op te maken. Opmaken is een term afkomstig uit de wereld van tijdschriften, kranten en boeken. Je zou opmaken mogen omschrijven als: het er aantrekkelijk uit laten zien van het geschreven woord.

Niemand leest geheel vrijwillig lange lappen aaneengesloten tekst. En dus beginnen we er niet aan als het niet perse hoeft. Zeker niet wanneer die lap tekst ons op een beeldscherm voorgeschoteld wordt.

Door de tekst er makkelijker leesbaar uit laten zien en visueel op te delen in hapklare brokken, kunnen we mensen verleiden om een tekst toch te gaan lezen.

Waar CSS nog meer voor is

CSS staat voor Cascading Style Sheets. Wanneer je dat intypt in Google Translate dan wordt dat in het Nederlands vertaald als ‘trapsgewijze stijlbladen’. En eigenlijk vertelt je dat nog steeds niks.

Want was is een stijlblad? Een stijlblad is een set standaarden, ofwel afspraken, waarin het ontwerp van een document wordt vastgelegd, evenals de geschreven inhoud.

Wanneer we een website maken en vormgegeven dan leggen als het ware in een CSS-bestand vast hoe de webpagina en de inhoud van de webpagina op het beeldscherm moet worden weergegeven.

Dit doen we per HTML-element regel voor regel. Daarmee zouden we kunnen spreken van het trapsgewijs, ofwel stapje voor stapje, vormgegeven van een webpagina.

Toen webdesigners eind vorige eeuw voor het eerst kennis konden maken met CSS was het alleen mogelijk om webpagina’s en de inhoud ervan vorm te geven met CSS.

Anno 2022 kunnen met CSS ook acties geprogrammeerd worden. Zoals bijvoorbeeld het uitklappen van een menu. Tevens kan met CSS voor elk schermformaat precies beschreven worden hoe een website erop moet worden weergegeven.

Een website responsive maken noemen we dat in vaktermen.

Wat is het verschil tussen HTML en CSS?

Betekent dit dan dat als je CSS gebruikt, je HTML niet langer hoeft te gebruiken? Want met HTML geef je een webpagina toch ook vorm?

Dat is waar. Maar het betekent niet dat hiermee HTML vervangen wordt door CSS.

Voor het maken en vormgeven van een webpagina gebruik je zowel HTML als CSS. Waarbij het verschil tussen HTML en CSS is: dat we met HTML de structuur van de webpagina beschrijven en met CSS de vormgeving van de webpagina regelen.

Als je HTML en CSS op de juiste wijze toepast bij het maken van een website, dan kan je met HTML en CSS alles maken wat je wilt.

Aan de hand van een voorbeeld zal ik proberen het verschil tussen HTML en CSS duidelijk te maken. In het artikel op de website waarin ik de vraag “Wat is HTML?” beantwoord, kun je lezen hoe je met behulp van HTML-tags platte tekst kunt vormgeven zodat het beter leesbaar wordt.

Tevens kun je in dit artikel lezen dat HTML ,voordat het toegepast werd op de manier zoals wij dat nu doen, bedoeld was om het delen van wetenschappelijke documenten makkelijker te maken.

En om een document tevens makkelijker leesbaar te maken werden er HTML-codes bedacht om de inhoud van het document de structureren en vorm te geven.

Wanneer ik een deel van de tekst in dit artikel achtereenvolgens:

Kopieer.
In een HTML-editor plak.
Opsla als HTML-bestand.
En laat weergegeven in een webbrowser, dan wordt de tekst als een soort van woordenspaghetti in de browser weergegeven.

Wanneer een tekst op die manier wordt weergegeven, dan nodigt dat zeker niet uit om verder te lezen.

Echter, zodra we van de tekst een echt HTML-document maken, en met behulp van wat HTM-tags structuur aanbrengen in de tekst, dan wordt de tekst ineens een heel stuk beter leesbaar. Zo kun je zien dat ik de koppen in de tekst een header-tag (<h1></h1>) heb meegegeven en de verschillende alinea’s de paragraph-tag (<p></p>)

Door gebruik te maken van deze twee HTML-tags kan ik, zoals je ziet, een tekst structureren tot een leesbaar geheel.

En als we aan de tekst dan ook nog een plaatje toevoegen, dan maakt dat het stukje tekst nog weer een stukje aantrekkelijker om te gaan lezen.

Als het puur om de leesbaarheid zou gaan, dan zouden we hier kunnen stoppen. Maar de tekst kan er met CSS nog veel beter en aantrekkelijker om te lezen uit gaan zien. Bijvoorbeeld door een lettertype te gebruiken die makkelijk leest op het scherm.

Het lettertype Verdana bijvoorbeeld. Omdat een schreefloos lettertype op een beeldscherm makkelijker leest dan een lettertype met schreef.

Ook de koppen mogen wat duidelijker en het plaatje zou wel wat beter uitgelijnd mogen zijn.

Die dingen moeten we niet in HTML willen doen. Simpelweg omdat HTML daar nooit voor bedoeld is geweest. Voor het echte opmaken van een tekst gebruiken we dan ook CSS.

Hoe koppel je CSS aan HTML?

Het toevoegen van CSS aan HTML kan op verschillende manieren. Die manieren zijn:

Een stijl direct toevoegen aan een HTML-tag.
Een stijlblad opnemen in een webpagina.
Een apart CSS-bestand maken en ernaar verwijzen.

Een stijl toevoegen aan een HTML-tag.

Als je CSS direct toevoegt aan een HTML-tag, dan is de gedefinieerde stijl alleen van toepassing op de HTML-tag waaraan je de stijl hebt toegevoegd.

In de onderstaande afbeelding zie je dat we CSS direct hebben toegevoegd aan één van de paragraph-tags in het HTML-document.

Je ziet dat door het toevoegen van CSS aan die ene tag de hele alinea grotere de letters heeft die blauw zijn en ook een andere lettertype hebben dan de rest.

Een stijlblad opnemen in de webpagina

Doorgaans wil je echter dat alle alinea’s op een webpagina hetzelfde lettertype, dezelfde lettergrootte en dezelfde kleur hebben.

Dit kun je heel makkelijk bereiken door een stijlblad op te nemen in de webpagina.

Dit doen we door tussen de tags <head> </head> van de pagina de tag <style></style> op te nemen. Tussen de style-tags zetten we vervolgens de CSS-stijlen die we de pagina willen geven.

Je ziet dat door in het stijlblad CSS-stijlen toe te wijzen aan de verschillende HTML-tags in het document:

De kop blauw is gekeurd en groter is geworden.
Het plaatje mooi uitgelijnd is en precies even breed is al de kop en de tekst.
Dat de tekst grijs van kleur is en weergegeven wordt in een schreefloos lettertype.
Dat de witruimte tussen de regels in de alinea wat groter is geworden. Iets wat tevens het lezen vanaf een beeldscherm makkelijker maakt.

Een apart CSS-bestand maken en ernaar verwijzen

Als we een website maken, dan willen we meestal het liefst dat alle pagina van de website op dezelfde manier zijn opgemaakt en er hetzelfde uitzien. Een apart stijlblad opnemen in iedere pagina is dan geen optie. Naast dat het onnodig veel werk is, laat het de kans op fouten toenemen.

Voor CSS-stijlen die voor de hele website moeten gelden maak je dan ook een apart CSS-bestand. Maar hoe maak je dan zo’n apart CSS-bestand? En hoe koppel je zo’n apart CSS-bestand dan vervolgens aan iedere HTML-pagina op je website?

Een CSS-bestand maak je net als een HTML-bestand in een tekst editor. Maar in plaats van het bestand de extensie .html mee te geven, geef je een CSS-bestand de extensie .css. Bijvoorbeeld: websitestijlen.css.

Vervolgens voeg je tussen de head-tags op iedere pagina van je website het volgende toe:

De CSS-stijlen in een CSS-bestand schrijf je op precies dezelfde wijze als dat je zou doen wanneer je een stijlblad opneemt in een webpagina.

Het voordeel van een extern CSS-bestand is niet alleen dat je vanuit één locatie alle stijlen regelen kunt voor je hele website. Met een extern CSS-bestand zorg je er tevens voor dat de pagina’s van je website sneller geladen worden in een browser.

Nu je weet wat CSS is en hoe je het gebruiken moet in combinatie met HTML, rest je alleen nog het leren schrijven van CSS. Met CSS kun je echter zo verschrikkelijk veel dingen maken, dat het raadzaam is om jezelf te beperken tot wat je echt nodig hebt en de pas onderdelen van CSS bij te gaan leren zodra je ze echt nodig hebt.