Wat is CSS en hoe gebruik je het voor jouw website?
Geschreven door:
Datum publicatie:
Wat betekent CSS?
Waarom CSS gebruiken?
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: