Wat is CSS en hoe gebruik je het voor jouw website?
Geschreven door:
Denise Crooij
Datum publicatie:
17 juni 2022
Wat betekent CSS?
CSS staat voor Cascading Style Sheets. Je kan CSS gebruiken voor de styling van de content op een website. Dit doe je door het opmaken van HTML bestanden. Cascading staat voor de prioriteit van de ingestelde regels voor de styling. Dit verwijst dan ook naar een waterval. Hoe hoger een regel in de stylesheet staat, hoe meer prioriteit deze dus krijgt. Wanneer twee regels conflicteren overschrijft de bovenste regel de onderste. Style Sheets kan worden vertaald naar stijlbladen, omdat het gaat om het vormgeven van de pagina’s, waarbij wordt afgeweken van de standaard inhoud van de pagina’s.
Waarom CSS gebruiken?
De belangrijkste reden om CSS te gebruiken is voor de opmaak van je website. Zo kun je je website ook responsive maken voor verschillende schermgroottes en ook voor tablets en mobiele apparaten. Dit houdt in dat de website voor alle schermgroottes goed wordt weergegeven. Met CSS kun je niet alleen je pagina stylen, maar ook de interacties (zoals hover) en animaties ontwerpen.
CSS Syntax
Wanneer je dit in CSS toepast kun je dit op de volgende manier invullen:
In het voorbeeld is h1 de selector, color is de eigenschap en de kleurcode is hierbij de waarde. In plaats van de kleurcode kan ook ‘red’ worden ingevuld. Het kiezen van een kleurcode is echter aan te raden om de huisstijl van de website aan te houden.
De selector verwijst naar het HTML element en bij de property en waarde, het gedeelte tussen de accolades {} wordt het element opgemaakt. De eigenschap en waarde kun je onderscheiden met een dubbele punt. De eigenschap en waarde worden declaratie genoemd. De declaratie sluit je af met een puntkomma. Achter de puntkomma kan je ook nog een ander declaratie blok toevoegen.
CSS toepassen
Je kan CSS op drie verschillende manieren toepassen.
1. Een intern stijlblad
Je kan CSS op drie verschillende manieren toepassen.In het head-gedeelte van een pagina kun je een stijlblad toevoegen. Dit kun je doen door de regels te zetten tussen HTML-code. In het begin open je het stijlblad en op het einde sluit je deze weer.
Om dezelfde regel als in het eerdere voorbeeld toe te passen op deze wijze kun je het op de onderstaande manier verwerken op de pagina van je website:
2. Een extern stijlblad
Een extern stijlblad is een tekstbestand waarin je de regels toe kunt voegen. Deze methode is eenvoudig omdat je de regels direct voor alle pagina’s toepast. Wil je een algemene regel overschrijven? Dan kun je dit doen door op de betreffende pagina een nieuwe regel in te stellen in hetgedeelte. Dit is in de meeste gevallen de beste manier, omdat je zo zorgt voor overzicht, structuur en ook een te lang HTML-bestand vermijdt.
Via een extern stijlblad kun je de opmaak op de volgende manier toepassen:
3. De openingstag van een HTML element
Na de openingstag van een HTML element kun je de code style=” “ toevoegen. De regel kun je hierbij tussen de aanhalingstekens plaatsen. Hetzelfde voorbeeld voor de H1 kun je hierbij op de volgende manier toevoegen:
Webdesign bij Modern Minds
Wil jij website design uitbesteden? Kom dan eens een langs en dan kijken we wat wij voor jou kunnen betekenen. Ook kun je uiteraard in contact komen met de specialisten uit ons team door hen te bellen of mailen. Zij zullen met jou sparren over hoe jullie organisatiedoelstellingen het beste kunnen worden bereikt.
