Cascading style sheets: voor een goed beheersbare site

Stel: u gaat een site maken die niet al te uitgebreid is. U wilt niet aan de slag met een content management systeem of andere geavanceerde internettechnologieën, maar u wilt wel een goed beheersbare site. U wilt bijvoorbeeld gemakkelijk een wijziging in de vormgeving doorvoeren, zonder alle pagina's afzonderlijk te hoeven aanpassen. Dan is een cascading style sheet (CSS) een uitkomst.

Wat is een cascading style sheet?

Waarschijnlijk werkt u wel eens met Word. Daarin is het mogelijk om sjablonen te definiëren, die ervoor zorgen dat alle koppen en alinea's in uw document er hetzelfde uitzien. Wanneer u wilt, kunt u met één aanpassing gemakkelijk een kop in de hele tekst tegelijk aanpassen. U kunt Kop 1 bijvoorbeeld cursief maken in plaats van vet. Door de sjabloon aan te passen, worden alle koppen 1 automatisch bijgewerkt. Gaat u een internetsite bouwen, dan vormt de cascading style sheet (CSS) dit sjabloon. In de CSS neemt u allerlei informatie op over de opmaak van uw HTML-pagina's. U kunt er onder andere bepalen hoe koppen, tabellen, en hyperlinks eruit moeten zien. U maakt een sjabloon (de CSS), die de opmaak van uw hele website regelt. Dit maakt het onderhoud veel eenvoudiger.

Een CSS is gemakkelijk te maken. Het is een tekstbestand met de extensie ".css", waarnaar u verwijst vanuit uw HTML-pagina's. U kunt dus met een eenvoudig programma als Kladblok (Notepad) al een CSS maken!

Meer dan onderhoudsgemak alleen

Een CSS is niet alleen een makkelijke manier om de opmaak van uw HTML-bestanden te onderhouden. Het biedt ook meer mogelijkheden dan HTML. Denk bijvoorbeeld aan de opmaak van hyperlinks op uw pagina. In HTML kunt u alleen de kleur van de hyperlinks wijzigen, maar met een CSS kunt u onder andere de onderstreping weghalen, de achtergrondkleur wijzigen en kaders maken.

Hoe werkt een CSS?

In een CSS kunt u onder andere:

de opmaak van standaard HTML-codes aanpassen;
klassen maken die een bepaalde opmaak hebben. (Een klasse is te vergelijken met een opmaakprofiel in Word, zoals Kop 1 of Kop 2 en kan per pagina verschillen.)

Standaard HTML-codes aanpassen
Stel, u wilt dat alle tekst met code H1 (Heading 1) blauw wordt weergegeven. Normaal zou u dat in elk HTML-bestand afzonderlijk moeten aangeven:

Dit is Heading 1 in het groen

Nu neemt u in de CSS de volgende regel op:

H1 {color: blue}

Wilt u nu ook een gestippeld kader om de kop zetten en hem een gele achtergrondkleur geven, dan komt de code er zo uit te zien:

H1 {color: blue; border-style: dotted; background-color: yellow}

Zo kunt u alle standaard HTML-codes aanpassen.

Klassen maken
U kunt ook klassen maken. Stel bijvoorbeeld dat u de H2-codes op de homepage blauw wilt weergeven en op de inhoudspagina's rood. Dan kunt u de volgende klassen maken (let op de punt aan het begin!):

.H2home {color: blue}
.H2inhoud {color: red}

Zet u op de een inhoudspagina een H2-code neer, dan ziet die er als volgt uit:

Dit is een Heading 2 op een inhoudspagina

Besluit u dat deze kop geel moet worden, dan verandert u alleen de regel in de CSS. Alle pagina's waarop deze klasse voorkomt, worden dan automatisch aangepast.

Koppeling tussen HTML-pagina's en de CSS

Aan de CSS alleen hebt u niet veel. U met op elke HTML-pagina een verwijzing naar de CSS maken. U zet deze verwijzing in het HEAD-gedeelte van de HTML-pagina. Deze verwijzing kan er als volgt uit zien:

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

Meer weten?

Natuurlijk biedt een CSS nog veel meer mogelijkheden. Wilt u meer weten over het gebruik van een CSS in uw website, dan helpen de volgende links u zeker verder: