Syntax van css

Soms is het handig om eens wat basisprincipes weer naar boven te halen. Hoe zat het ook al weer en hoe moest je een en ander ook alweer gebruiken. We beginnen met CSS. In drie artikelen willen we de basisregels van CSS weer naar boven halen. In het eerste artikel gaan we in op de manier van schrijven in CSS. Met name 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.

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
U 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;}

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 opgeletje 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;}

HTML syntax:

opgelet

ID
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.
Een voorbeeld kan zijn is dat je de hoofdtitel van je website een bepaalde opmaak wilt toekennen.

CSS syntax:
#hoofdtitel{property:waarde;}

HTML syntax:

Welkom op onze site

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 propertys.

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

of

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

Een reactie achterlaten

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *