CSS basis syntaxis

CSS syntaxis

CSS-regels bestaan uit twee hoofdcomponenten: de selector en een of meerdere verklaringen.

selector {verklaring1; verklaring2; ... verklaringN }

De selector is meestal het HTML-element dat je wilt stijlen.

Elke verklaring bestaat uit een eigenschap en een waarde.

Eigenschappen (eigenschappen) zijn de stijl-eigenschappen (style attributes) die je wilt instellen. Elke eigenschap heeft een waarde. Eigenschappen en waarden worden gescheiden door een dubbele punt.

selector {eigenschap: waarde}

Deze regel van code definieert de tekstkleur van de h1-elementen als rood en stelt de lettergrootte in op 14 pixels.

In dit voorbeeld is h1 de selector, color en font-size zijn de eigenschappen, en red en 14px zijn de waarden.

h1 {color:red; font-size:14px;}

Hieronder wordt de structuur van het bovenstaande codevoorbeeld weergegeven:

CSS syntaxis

Tip:Gebruik haakjes om de verklaringen te omkleden.

Verschillende schrijfwijzen en eenheden van waarden

Naast de Engelse woorden red, kunnen we ook de hexadecimale kleurwaarde #ff0000 gebruiken:

p { color: #ff0000; }

Om bytes te besparen, kunnen we de afkorting van CSS gebruiken:

p { color: #f00; }

We kunnen RGB-waarden op twee manieren gebruiken:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

Let op, bij het gebruik van RGB percentages moet je de percentagesymbool schrijven, zelfs als de waarde 0 is. In andere gevallen is dit niet nodig. Bijvoorbeeld, als de grootte 0 pixels is, is er geen behoefte aan de px-eenheid na 0, omdat 0 0 is, ongeacht de eenheid.

Vergeet de aanhalingstekens niet te schrijven

Tip:Als de waarde meerdere woorden bevat, moet je de waarde aanhalingstekens geven:

p {font-family: "sans serif";}

Meerdere verklaringen:

Tip:Als je meerdere verklaringen wilt definiëren, moet je elke verklaring scheiden met een puntkomma. Het volgende voorbeeld toont hoe je een tekstgedeelte met centreren van de tekst in rood kunt definiëren. De laatste regel hoeft geen puntkomma te bevatten, omdat een puntkomma in het Engels een scheidingsteken is, niet een einde-teken. Toch voegen de meeste ervaren ontwerpers een puntkomma toe aan het einde van elke verklaring, omdat dit het verminderen van fouten bij het toevoegen of verwijderen van verklaringen uit bestaande regels mogelijk maakt. Zoals hier:

p {text-align:center}; color:red;}

Je zou op elke regel slechts één eigenschap moeten beschrijven, zodat de leesbaarheid van de stijldefinitie wordt verbeterd, zoals hierboven:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

Spaties en hoofdletters/kleine letters

De meeste stijltabellen bevatten niet meer dan één regel, en de meeste regels bevatten niet meer dan één verklaring. Het gebruik van meervoudige verklaringen en spaties maakt stijltabellen gemakkelijker te bewerken:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

Of er spaties zijn, dat beïnvloedt niet het werk van CSS in de browser, net als met XHTML, is CSS niet gevoelig voor hoofdletters en kleine letters. Er is echter een uitzondering: als het om het werken met HTML-documenten gaat, zijn class- en id-namen gevoelig voor hoofdletters en kleine letters.