Hoe schrijf je CSS? De Syntax van Cascading stylesheets

De syntax van CSS, met andere woorden, hoe schrijf je CSS? CSS bestaat uit de ‘selector’, de ‘property’ en de ‘waarde’.

CSS heeft een bepaalde syntax. Dit zijn de regels die je moet volgen bij het schrijven van css.

css syntax schrijven

Elke verwijzing van CSS bestaat uit minstens 3 onderdelen.

de selector
de property
een waarde

CSS syntax:

selector{property: waarde;}

Properties
Het is ook perfect mogelijk om meerdere properties toe te kennen aan 1 selector. Zoals een tekst in het vet en cursief te plaatsen. We scheiden hiervoor alle propertys van elkaar met ; .

CSS syntax:

body { 
  property: waarde;
  property2: waarde;
  property3: waarde
}

De selector

Dit onderdeel duidt aan waar de opgemaakte tekst of stijlblok zich bevindt. Deze plaats kun je op 3 verschillende mogelijke manieren aanspreken.

HTML-tag
Je kunt makkelijk een opmaak geven aan een volledige HTML-tag. Zo kun je voor elke body op je website bijvoorbeeld als achtergrond kleur zwart geven. Zo hoef je niet elke body aan te passen.
De selector is hierbij de naam van de HTML-tag. Het voorbeeld van body vind je hier.

CSS syntax:

body {property: waarde;}
body {background-color: black;}

Klasse
Het is ook mogelijk om zelf een groep aan te maken waarbij je 1 bepaalde opmaak aan geeft. Hierbij geef je aan de op te maken HTML-tag een naam.

Dit noemen we een klasse naam. Die naam of klasse kun je in je css oproepen en zo een opmaak aan toekennen. Maar opgelet, je mag niet vergeten dat je voor elke klasse in je CSS code een puntje moet plaatsen.
Een eenvoudig voorbeeld is dat je een klasse aanmaakt om een bepaalde tekst in het vet te plaatsen.

CSS syntax:

.vet {property: waarde;}
.vet {font-weight: bold;}

HTML syntax:

<p class="vet">opgelet, vetgedrukte tekst!</p>

id (identity)
De 3de mogelijkheid is een bepaald bereik instellen voor de opgemaakte tekst. Je kan aan elke HTML-tag een id toewijzen. Dit is een persoonlijke naam voor deze tag om deze tag specifiek aan te spreken.

Je geeft hier dan je H1 HTML-tag een id en verwijst in je CSS bestand naar deze id door voor de naam van de selector een ‘#‘ te plaatsen. Normaal gesproken komt een id maar een keer voor, deze is dus uniek!

Een voorbeeld kan zijn is dat je de hoofdtitel van je website een bepaalde opmaak wilt toekennen.

CSS syntax:

#hoofdtitel {property: waarde;}
#hoofdtitel {font-size: 68px;}

HTML syntax:

<h1 id="hoofdtitel">Welkom op onze site</h1>

Commentaar
Het is ook mogelijk om tussen je CSS bestand commentaar te schrijven die je later kunnen helpen om bepaalde stijlen terug te vinden.

Dit is vooral belangrijk als je lange en ingewikkelde css bestanden gebruikt. Je mag deze commentaar plaatsen tussen verschillende stijlen of tussen de verschillende properties.

CSS syntax:

selector {property: waarde;}
/* hier kun je dan commentaar schrijven */
selector2 {property: waarde;}

of

selector{
property: waarde;
/* commentaar: het 2de property */
property2: waarde;
}

Dit artikel is op 29 mei 2019 voorzien van een update.