Hoe je CSS gebruikt voor je website-layout

Zó werkt CSS! Drie manieren waarop je met CSS je website vormgeeft.

Elke webpagina is opgebouwd uit een aantal html-elementen, en die elementen worden vormgegeven met behulp van CSS. Deze afkorting staat voor cascading stylesheets. Een stylesheet is een stijlblad: een bestand waarin de layout (of stijl) van een website en alle onderdelen ervan is vastgelegd. Het woord cascading (letterlijk vertaald: als een waterval) betekent dat de stijlkenmerken van een bepaald html-element automatisch ook toegepast worden op alle sub-elementen ervan. (Als je dat niet wilt, kun je die stijleigenschappen natuurlijk wel weer overschrijven door een of meer nieuwe kenmerken op te geven voor dat sub-element.)

Er zijn drie manieren waarop je met behulp van CSS je website-layout kunt beïnvloeden (zie ook de video iets verder op deze pagina):

1. Je kunt in de openingstag van een html-element de code style="" neerzetten. Binnen de set dubbele aanhalingstekens plaats je dan de stijlkenmerken die dat element moet krijgen. Dit heet een inline style. Stel dat je bijvoorbeeld de tekst van een bepaalde alinea rood en vetgedrukt wilt laten weergeven, dan ziet de openingstag van die alinea er zo uit:

   <p style="color: red; font-weight: bold;">

2. Wat je ook kunt doen, is in de head van je pagina een stijlblok neerzetten. Dit heet een internal stylesheet. Deze methode is gemakkelijk als je op een bepaalde pagina álle elementen van een bepaald type hetzelfde uiterlijk wilt geven. Zo’n stijlblok begint met <style> en eindigt met </style>.

   Stel dat de de tekst van élke alinea van je pagina blauw moet worden, en dat de eerste regel van elke alinea 24 pixels moet inspringen. In de head van je pagina zet je dan het volgende stijlblok neer:

   <style>
p { color: blue; text-indent: 24px; }
</style>

   Zoals je in dit voorbeeld ziet, begin je met het noemen van het html-element (dat is hier het element p), en daarachter zet je een set accolades neer. Tussen die accolades plaats je de verschillende stijlkenmerken voor dit element, en elk kenmerk sluit je af met een puntkomma. Ben je klaar met de vormgeving van dat specifieke element, dan ga je naar de volgende regel en ga je verder met de kenmerken voor een ander element. In zo’n stijlblok kun je dus de stijlkenmerken van meerdere html-elementen kwijt.

   NB: binnen een stijlblok mag je zoveel witregels en spaties toevoegen als je wilt. Dus vind je het overzichtelijker om elke eigenschap op een nieuwe regel te laten beginnen, ga gerust je gang!

3. Ten slotte kun je de stijlkenmerken van een html-element ook nog vastleggen in een extern stijlblad (external stylesheet). De meeste html-elementen zullen op alle pagina’s van je website dezelfde layout moeten krijgen. Het is dan onhandig als je in de head van elke pagina een stijlblok zou moeten neerzetten. Een extern stylesheet is dan veel eenvoudiger. En als je op een enkele pagina een bepaald element eens een afwijkend uiterlijk wilt geven, dan overschrijf je de eigenschappen uit het externe stylesheet gewoon door nieuwe eigenschappen voor dit element op te geven in een stijlblok in de head, of direct in de openingstag van het element zelf.

Hieruit blijkt meteen de volgorde waarin de verschillende methodes worden toegepast: in eerste instantie worden de kenmerken uit het externe stijlblad toegepast, dan wordt er gekeken of er in de head misschien nog een stijlblok staat dat de bestaande eigenschappen overschrijft, en als laatste wordt er gecontroleerd of er misschien in de openingstag van een element nog specifieke stijleigenschappen zijn opgegeven.

Zoals je zult begrijpen, wordt voor de layout van een website een extern stylesheet het meest toegepast. Zo’n stylesheet is een heel gewoon tekstbestand, dat je maakt in een html-editor. Je moet het alleen niet opslaan als html- (of php-)bestand, maar het moet altijd de extensie .css krijgen. Wat er vóór de punt komt te staan, mag je zelf weten; je zou het stylesheet bijvoorbeeld basis.css, stijl.css of layout.css kunnen noemen.

Voorbeeld

Een extern stijlblad ziet er net zo uit als het stijlblok uit punt 2, behalve dan dat de twee style-tags ontbreken. Dit zouden bijvoorbeeld de eerste regels kunnen zijn van je externe stylesheet:

body { background-color: silver; font-family: arial, sans-serif; color: darkgrey; }
header { width: 900px; height: 74px; background-color: darkblue; }
h1 { font-family: color: red; }

Eerst komt dus weer het html-element, daarna een set accolades, en binnen die accolades staan de verschillende stijlkenmerken die je wilt laten toepassen op dit element.

Met de code uit het voorbeeld hierboven bepaal je in de eerste regel dat de achtergrondkleur van je website zilvergrijs moet worden, dat voor de tekst op je site het Arial-lettertype gebruikt moet worden (of, als dat niet beschikbaar is, een ander sans-serif lettertype), en dat de kleur van de tekst op je website donkergrijs moet zijn.

In de tweede regel bepaal je dat de header 900 pixels breed moet worden en 74 pixels hoog, en dat hij een donkerblauwe achtergrond moet krijgen. En in de derde regel overschrijf je voor de koppen (headings) van het eerste niveau de ingestelde standaardkleur (die ‘darkgrey’ was) met de kleur ‘red’.

Op die manier loop je stuk voor stuk alle html-elementen van je website langs en bepaal je welke layout ze moeten krijgen. Ook hier geldt trouwens weer dat je voor de overzichtelijkheid zoveel spaties en witregels mag invoegen als je nodig hebt.

Link naar stylesheet

Ten slotte is er nog één ding dat je moet doen: je moet de browsers doorgeven welk stylesheet ze moeten gebruiken om je webpagina’s vorm te geven en waar dat stylesheet precies te vinden is. Dat doe je met deze code, die je in de head van al je pagina’s zet:

<link href="css/basis.css" rel="stylesheet" type="text/css" media="screen">

Wat je met deze code wil zeggen, is dit: Maak voor de vormgeving van de verschillende html-elementen op deze webpagina gebruik van een stylesheet dat basis.css heet, en dat te vinden is in een map met de naam ‘css’.

Tip

• Een overzicht van CSS-eigenschappen is natuurlijk altijd handig. Toch kun je niet zomaar elke eigenschap uit dit overzicht gebruiken, want (nog) niet alle browsers kunnen goed met elke eigenschap overweg. Klik je op een eigenschap uit het overzicht, dan kom je op een pagina met meer uitleg terecht. Onder het kopje Browser Support lees je vanaf welke versie een bepaalde browser deze eigenschap ‘begrijpt’.