Introductie in Stylesheets

Met stylesheets kan de grafische weergave van een website worden aangestuurd vanuit een centrale plaats. De styling hoeft niet langer in iedere afzonderlijke HTML-pagina worden aangepast, maar door gebruikmaking van "classes" en "ID’s" wordt ze toegepast op alle pagina’s en tags met die class of identificatie. De stylesheets zijn in een specifieke taal geschreven: CSS.

Zoals je al weet, maat SPIP een scheiding tussen inhoud en grafische vormgeving: de skeletten sorteren en plaatsen de gewenste inhoud in HTML-pagina’s, maar het grafisch ontwerp wordt gedaan door stylesheets. We gaan in dit artikel uitleggen wat de beste manier is om de CSS in SPIP naar jouw wensen aan te passen!

In een klassieke website moest iedere HTML-pagina afzonderlijk worden geschreven en moesten bij iedere aanpassing van de grafische vormgeving tientallen pagina’s worden aangepast. SPIP verbetert die situatie op meerdere manieren. Door gebruik te maken van "skeletten" hoeft slechts één specifieke aanpassing te worden gedaan om die op alle bladzijden met eenzelfde soort van inhoud toe te passen.
Toch lost dit het probleem niet volledig op. Wanneer je bijvoorbeeld het plan opvat om je pastelblauwe layout om te zetten, moet je dat in alle skeletten doen.

De oplossing is het gebruik van externe stylesheets, bestanden die op de gehele site van toepassing zijn. Ze hebben twee grote voordelen:

  • het is een uniek, gecentraliseerd bestand dat je op ieder HTML-bestand (dus ook een SPIP skelet) van toepassing kunt laten zijn;
  • alle grafische kenmerken worden éénmalig gedefinieerd, ongeacht het aantal keren dat ze in je HTML worden toegepast.

In de praktijk

Om een stylesheet van toepassing te laten zijn op een HTML-bestand (en dus ook op een skelet van SPIP) moet het worden gedeclareerd in de heading van de pagina (tussen de <head> tags), op de volgende wijze:

<link rel="stylesheet" type="text/css" href="mijn_styles.css" />

-  Het bestand mijn_styles bevat de grafische kenmerken die je op de HTML-pagina wilt toepassen. (We zullen de bestandsnaam mijn_styles.css in deze rubriek als voorbeeld blijven aanhouden.)

-  Het bestand heeft de extensie «.css». In feite is CSS de naam van de gebruikte programmeertaal, net als HTML dat is voor webpagina’s.

Let op: Een stylesheet kan zowel van toepassing zijn op een statische HTML-pagina als op een (dynamisch) skelet van SPIP. Dus alle tips en trucs over CSS kunnen ook voor beide worden toegepast.

Als je de vorige alinea’s goed hebt gelezen, kun je sceptisch zijn: je moet nóg een taal leren om stylesheets te kunnen gebruiken (en SPIP heeft niets mee te maken!). CSS gebruikt niet de HTML syntax. Toch kan de taal zeer eenvoudig worden toegepast. Je vindt er op internet allerlei uitleg over, van simpele voorbeelden tot complexe oplossingen.

Auteur Hanjo Gepubliceerd op: Aangepast: 13/03/16

Vertalingen: عربي, català, Deutsch, English, Español, فارسى, français, italiano, Nederlands, русский, Türkçe, українська