De anatomie van een CSS regel

In het vorige voorbeeld gebruikten we het klassieke zinnetje "Hallo wereld" om alvast te laten doorschijnen hoe gemakkelijk CSS een HTML element een zekere stijl kan geven. Maar waarom ziet die regel er zó uit en niet anders? In dit hoofdstuk zullen we ons concentreren op de anatomie en syntaxis van CSS regels met het doel een beter begrip te krijgen van de opbouw en werking van CSS. Laten we het vorige voorbeeld nog eens in ogenschouw nemen, waarin een CSS regel een H1 element van kleur voorzag:

h1 {
	color: DeepSkyBlue;
}

We hebben hier een selector met een property (eigenschap) en een value (waarde) - dit zijn de kernbegrippen van CSS. Probeer de namen van die begrippen te onthouden bij het doorwerken van deze handleiding. In dit voorbeeld: h1 is de naam van de selector, color is zijn property en DeepSkyBlue is zijn value.

Tussen de namen van de diverse begrippen door zie je een aantal leestekens: de property en zijn value zijn omsloten door accolades. Een dubbele punt scheidt de property van zijn value en een puntkomma staat achter de value. Elk van deze leestekens vergemakkelijkt voor de browser de ontleding ("parsing") van de CSS regel en zijn toepassing op HTML code. De accolades maken het mogelijk om een value van meer dan één property aan dezelfde selector toe te kennen. De dubbele punt maakt duidelijk waar de property naam eindigt en waar de toekenning van de value begint en de puntkomma geeft aan waar de toekenning eindigt.

De syntaxis lijkt misschien wat overdreven voor de eenvoudige selector die we in dit voorbeeld zagen. Echter, in de praktijk waar ingewikkelde selectors en meerdere properties met complexe values voorkomen hebben we echt wel een uitgebreide syntaxis nodig. Laten we eens een wat ingewikkelder voorbeeld bij de kop nemen:

h1, h2, h3 {
	color: DeepSkyBlue;
	background-color: #000;
	margin: 10px 5px;
}

h2 {
	color: GreenYellow;
}

Hier hebben we twee selectors waarvan de eerste bestaat uit de drie verschillende HTML elementen h1, h2 en h3 en de tweede selector alleen uit h2. De eerste selector definieert drie properties met verschillende values voor drie HTML elementen. Je ziet nu meteen al dat de syntactische regels echt wel nodig zijn om je CSS opdrachten te kunnen ontleden.

Formattering en blanco ruimte

Misschien vraag je je af waarom we de CSS code geformatteerd hebben op de manier als in het laatste voorbeeld, met de open-accolade op dezelfde regel als de selector en de sluit-accolade op zijn eigen regel. Verder worden de property namen vooraf gegaan door flink wat spaties, ze zijn geïndenteerd zodat ze verticaal aangelijnd zijn en de dubbele punt heeft geen spatie voor zich maar wel achter zich. Waarom is dit? Dat is omdat we dat mooi vinden en omdat het CSS niets kan schelen of en waar er spaties staan.

Andere mensen vinden het mooier om de open-accolade een eigen regel te geven en om de dubbele punt een spatie vooraf te geven:

h1
{
	color : DeepSkyBlue;
}

Dat werkt net zo goed. Vaak wordt CSS zo geschreven dat de code zo weinig mogelijk geheugenruimte kost (ook een spatie kost minimaal één byte) en compacte CSS code ziet er dan bijvoorbeeld zo uit:

h1{color : DeepSkyBlue;}

Dat werkt ook prima, maar vooral als de regels ingewikkeld worden komt de leesbaarheid door de mens van de code in het geding. Ook is het editen van een letterbrij niet erg gemakkelijk. Maar voor het ontleden maakt het niets uit, dankzij de leestekens weet de browser precies hoe het zit.

Samenvatting

In dit hoofdstuk hebben we geleerd wat de basisingrediënten van CSS zijn, namelijk: selectors, poperties en values. Een CSS stijlbestand kan vele selectors bevatten en een selector kan values van meerdere properties toegekend krijgen. Ook een value kan uit meerdere waarden bestaan. We hebben ook geleerd hoe accolades, dubbele punten en puntkomma's de diverse ingrediënten van elkaar scheiden en dat de CSS parser blind is voor spaties. Gebruik blanco ruimte naar eigen goeddunken.

Tot nu toe hebben we een paar elementaire typen van selectors ontmoet, maar selectors vormen een veel uitgebreider en diepgaander onderwerp. Ook bestaan er veel meer properties dan we tot nu toe tegengekomen zijn. Dit alles komt later in deze handleiding ter sprake.