We leren de CSS syntax in detail: we kijken hoe eigenschappen en hun waarden samen een stijldeclaratie vormen, hoe meerdere stijldeclaraties een declaratieblok vormen en hoe regelsets en selectoren een complete CSS-regel vormen.  We ronden het artikel af door te kijken naar andere CSS syntax-kenmerken zoals opmerkingen en witruimte.

Vereisten: Algemene computervaardigheden, de basissoftware geïnstalleerd hebben, algemene kennis van hoe werken met files, basiskennis HTML basics (bekijk Introductie tot HTML), en een idee van Hoe CSS werkt.
Doelsteling: De basis CSS-syntax in detail aanleren.

Opmerking: CSS is een declaratieve taal, waardoor de syntax relatief eenvoudig is.  Het heeft daarnaast ook een zeer aangename manier van omgaan met fouten, waardoor je fouten kan maken zonder de volledige pagina te breken — zo worden stijldeclaraties die niet worden begrepen gewoon genegeerd.  Het nadeel hiervan is dat de reden voor een fout soms moeilijker te begrijpen is.  Als je doorleest, zal het allemaal duidelijk worden.

Enkele basisbegrippen

Op het basisniveau bestaat CSS uit twee bouwstenen:

  • Eigenschappen: zaken die je wil stijlen (bv. het lettertype, de breedte, de achtergrondkleur).
  • Waarden: de stijlwaarde voor een bepalde eigenschap die aangeeft hoe je wil dat die eigenschap eruit ziet (bv. rood voor de achtergrondkleur).

Een eigenschap vormt, in combinatie met een waarde, een CSS stijldeclaratie. Stijldeclaraties worden binnen CSS declaratie-blok gezet (praktisch gezien zet je ze tussen accolades).  Samen met één of meerdere selectoren vormt een declaratie-blok een regelset (of CSS regels).

Laten we eens kijken naar een concreet voorbeeld (we zagen iets zeer gelijkaardig in ons vorig artikel).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>

    <ul>
      <li>This is</li>
      <li>a list</li>
    </ul>
  </body>
</html>

En het CSS bestand:

h1 {
  colour: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

p, li {
  text-decoration: underline;
}

Als we deze twee combineren krijgen we het volgende resultaat:

Laten we de syntax eens nader bestuderen.

CSS declaraties

CSS eigenschappen installen op specifieke waarden is de kernfunctie van CSS.  De CSS-engine berekent voor elk element op een pagina welke declaraties van toepassing zijn, zodat deze op de juiste manier kunnen getoond en gestijld worden.  Het is belangrijk te onthouden dat zowel eigenschappen als waarden hoofdlettergevoelg zijn.  Eigenschap en waarde worden gescheiden door een dubbel punt (:).

Er zijn meer dan 300 verschillende eigenschappen in CSS and een schier oneindig aantal waarden.  Niet alle combinaties zijn toegestaan: elke eigenschap heeft een specifieke lijst van waarden die mogelijk zijn.

Belangrijk: Indien een eigenschap niet gekend is, of indien er een ongeldige waarde gegeven wordt, dan is de declaratie ongeldig.  Ongeldige declaraties worden volledig genegeerd door de CSS-engine.

Belangrijk: In CSS (en in andere webstandaarden), is er bepaald dat de Amerikaanse spelling gebruikt moet worden. Zo moet color (zoals gezien in de code hierboven) altijd als color geschreven worden.  Het Britse colour zal niet werken.

Actief leren: Zoek de declaraties

In het voorbeeld hierboven zijn er vijf verschillende CSS declaraties.  Kan je de foutieve declaratie vinden en verklaren waarom die fout is?

CSS declaratieblokken

Declaraties worden gegroepeerd in blokken, waarbij elke groep genest wordt binnen accolades.  Je krijgt dus eerst een openingsaccolade ({), dan de declaraties en tot slot de sluitaccolade (}).

Elke declaratie binnen een declaratieblok moet eindigen op een puntkomma (;), anders zal de code niet werken (of op z'n minst andere resultaten geven dan verwacht). De laatste declaratie van een blok moet in principe niet eindigen op een puntkomma, maar het is een best practice om dit toch te doen.  Door toch een puntkomma te plaatsen verhinder je namelijk fouten indien er nadien nog een declaratie zou toegevoegd worden.

Opmerking: Blokken kunnen genest worden.  In zo'n gevallen moeten ook de openings- en sluitaccolades genest worden (net zoals de open- en sluittags van geneste HTML element).  Het meest voorkomende voorbeeld is de @-regel, dit zijn blokken die beginnen met een @-identificator, zoals  @media, @font-face, enz. (Zie ook CSS Verklaringen hieronder).

Opmerking: een blok mag leeg zijn — dit is perfect geldig.

Actief leren: Waar zijn de declaratieblokken?

Kan je in het bovenstaand voorbeeld de drie afzonderlijke blokken identificeren?

CSS selectoren en regels

We mankeren nog een puzzelstukje: hoe weet de CSS engine op welke elementen een declaratieblok van toepassing is?  Dit wordt gedaan door voor elk declaratieblok een selector te zetten.  Een selector is een patroon waarmee je bepaalde elementen op de pagina kan selecteren.  De geassocieerde declaraties worden dan enkel op die elementen toegepast.  Selector en declaratieblok vormen samen een CSS regelset of kortweg CSS regel.

Selectoren kunnen zeer ingewikkeld worden.  Je kan er voor zorgen dat een regel op verschillende elementen toegepast wordt door verschillende selectoren te gebruiken die van elkaar gescheiden worden door kommas.  Selectoren kunnen ook aan elkaar gehaakt worden, bv. Ik wil elk element selecteren met de klasse "blah", maar enkel indien het genest is binnen een article-element, en enkel wanneer de muis er boven zweeft.  Maak je geen zorgen: dit wordt allemaal veel duidelijker eens je wat meer ervaring krijgt met CSS, en we verduidelijken de verschillende selectoren in detail in het volgende artikel, Selectoren.

Een element mag door verschillende selectoren geselecteerd worden, en dus kunnen verschillende regels dezelfde eigenschap op verschillende waarden instellen.  CSS definieert regels die bepalen wanneer welke regel voorrang krijgt bij zulke conflicten.  Die regels noemen we het waterval-algoritme, en je leert meer over hoe het werkt in Waterval en overerving.

Belangrijk: Indien een enkele selector in een ketting of groep ongeldig is, bv. wanneer je een onbekend pseudo-element of een onbekende pseudoklasse gebruikt, dan wordt de volledige groep of ketting van selectoren ongeldig.  Maw: dan wordt de volledige regel ongeldig (en dus genegeerd).

Actief leren: Identificeer de groep van selectoren

Kan je in ons voorbeeld de regel vinden die zal toegepast worden op twee verschillende types elementen?

CSS verklaringen

CSS Regels zijn de belangrijkste en meest voorkomende bouwsteen van een stylesheet. Maar er zijn andere bouwstenen die je occasioneel zal tegenkomen — CSS regels zijn één type van de zogenaamde CSS verklaringen.  De andere types zijn:

  • At-regels die gebruikt worden in CSS om metadata, voorwaardelijke informatie en andere beschrijvende informatie over te brengen.Ze starten met een at-teken (@), gevolgd door een identificator ide zegt welk type regel het is, dan een syntaxblok en eindigend in een puntkomma (;). Elk soort at-regel, gedefinieerd door een identificator, heeft zijn eigen interne syntax en semantiek.  Voorbeelden zijn: Specifiek syntaxvoorbeeld:
    @import 'custom.css';
    Deze at-regel importeert een ander CSS-bestand in de huidige CSS.
  • Geneste verklaringen zijn een specifieke subset van de at-regel, met als syntax een geneste blok van CSS regels die enkel zullen worden toegepast indien aan een specifieke voorwaarde voldaan wordt:
    • De inhoud van de @media at-regel wordt enkel toegepast indien het toestel waarop de browser draait aan de voorwaarde voldoet;
    • de inhoud van de @supports at-regel wordt enkel toegepast indien de browser de gespecifieerde feature ondersteunt;
    • de inhoud van de @document at-regel wordt enkel toegepast indien de huidige pagina aan de voorwaarden voldoet.
    Specifiek syntaxvoorbeeld:
    @media (min-width: 801px) {
      body {
        margin: 0 auto;
        width: 800px;
      }
    }
    
    De bovenstaande geneste verklaring wordt enkel toegepast indien de paginabreedte meer dan 800 pixels is.

Te gepaste tijde zal je elders in de cursus meer leren over sommige soorten at-regels / geneste verklaringen.

Belangrijk: Een verklaring die geen regel, een at-regel of een geneste verklaring is, is ongeldig en zal genegeerd worden.

Voorbij syntax: CSS leesbaar maken

Zoals je kan zien is CSS syntax niet moeilijk: je schrijft wat regels, en als je die verkeerd schrijft worden ze gewoon genegeerd.  Ook al werkt die aanpak, er zijn enkele best practices die er voor zorgen dat je CSS code gemakkelijker te gebruiken en onderhouden is.

Witruimte

Spaties, tabs en lijneindes zijn soorten witruimte. Je kan witruimte toevoegen om je stylesheet leesbaarder te maken.

Net zoals in HTML wordt de meerderheid van de witruimte in CSS genegeerd.  De meeste witruimte is er enkel om de leesbaarheid te verhogen.In ons eerste voorbeeld hieronder hebben we elke declaratie (en begin / einde van een regel) op zijn eigen lijn gezet.  Deze praktijk zorgt er voor dat de CSS eenvoudiger te onderhouden en te begrijpen is:

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p, #id:first-line {
  background-color: red;
  background-style: none
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

Je zou dezelfde CSS ook kunnen schrijven zonder al die extra witruimte, functioneel is dit identiek aan het eerste voorbeeld, maar zoals je direct zal zien is dit een pak moeilijker te lezen:

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; background-style: none}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

De layout die je kiest voor je code is meestal een persoonlijke voorkeur.  Maar wanneer je in teamverband werkt, zal je merken dat er vaak een stijlgids met daarin een conventie wordt opgesteld en opgelegd.

De witruimte waar je voorzichtig mee moet zijn in CSS is die rond de eigenschappen en hun waarden.  Zo is, bijvoorbeeld, de volgende CSS geldig:

margin: 0 auto;
padding-left: 10px;

Maar het volgende is ongeldig:

margin: 0auto;
padding- left: 10px;

Dit is ongeldig omdat 0auto geen geldige waarde is voor de margin-eigenschap (0 en auto zijn twee afzonderlijke waarden).  Ook de padding- eigenschap wordt niet herkend als een geldige eigenschap.  Zorg er dus altijd voor dat je afzonderlijke waarden van elkaar scheidt met minstens één spatie, maar hou de eigenschappen en waarden samen als één enkele string.

Commentaar

Net zoals in HTML is het aan te raden om commentaar toe te voegen in je CSS.  Zo kan je anderen, maar ook jezelf (na enkele maanden niet meer naar de code gekeken te hebben bv.), helpen begrijpen waarvoor die CSS dient.  Commentaar kan ook helpen bij testen door tijdelijk delen van je code in commentaar te zetten.  Zo kan je bijvoorbeeld sneller vinden welk deel van je code een fout veroorzaakt.

Commentaar in CSS begint met  /* en eindigt met */.

/* Handle basic element styling */
/* -------------------------------------------------------------------------------------------- */
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) {
  /* Let's special case the global font size. On large screen or window,
     we increase the font size for better readability */
  body {font-size: 130%;}
}

h1 {font-size: 1.5em;}

/* Handle specific elements nested in the DOM  */
/* -------------------------------------------------------------------------------------------- */
div p, #id:first-line {background-color: red; background-style: none}
div p                 {margin          :   0; padding         : 1em;}
div p + p             {padding-top     :   0;                       }

Korte notatie

Sommige eigenschappen zoals font, background, padding, border, en margin worden korte notatie-eigenschappen genoemd.  Dit is omdat ze toelaten de waarden van verschillende eigenschappen in een enkele declaratie samen te ballen.  Dit spaart tijd en maakt je code korter.

Zo zal deze declaratie:

/* in shorthand like padding and margin, the values are applied
   in the order top, right, bottom, left (the same order as an analog clock). There are also other 
   shorthand types, for example two values, which set for example
   the padding for top/bottom, then left/right */
padding: 10px 15px 15px 5px;

Hetzelfde doen als al deze declaraties:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

Waar deze declaratie:

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

Hetzelfde doet als al deze declaraties:

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

We gaan niet proberen alle korte notaties aan te leren.  Je zal verschillende voorbeelden tegenkomen later in de cursus, en het is aan te raden om zelf de korte notatie-eigenschappen op te zoeken in onze CSS referentie om meer te leren hierover.

Verdere literatuur

Je zou nu voldoende CSS syntax moeten kennen om een werkend style sheet te schrijven dat je gemakkelijk kan onderhouden.  In het volgende artikel kijken we in meer detail naar CSS selectoren: welke er bestaan en hoe ze werken.

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: Badlapje
 Laatst bijgewerkt door: Badlapje,