Cascading Style Sheets-
een introductie

waarmee Kees Grinwis een nieuw vergezicht opent

Op diverse regio's wordt er aandacht geschonken aan het ontwerpen van een web-pagina, dit wordt gedaan in de vorm van HTML cursussen. Nu is HTML een belangrijk onderdeel van het maken van een website, maar inmiddels is het zo dat een website te maken is door het combineren van diverse "talen". In dit artikel hoop ik uit te leggen hoe het mogelijk is om HTML en Cascading Style Sheets (CSS) te combineren.

Één van de redenen dat veel hobbyisten die een website bouwen geen, of in elk geval verkeerd, gebruik maken van style sheets is het feit dat er vaak gekeken wordt naar de broncode van websites die door anderen gemaakt zijn. Het overgrote deel van de op dit moment aanwezige sites maakt nog (steeds) geen gebruik van CSS of doet dit op een incorrecte wijze, voor RISC OS gebruikers geldt hierbij ook nog eens dat de bestaande browsers helemaal geen, of geen uitgebreide ondersteuning voor CSS hebben.

Inmiddels zijn er meer en meer websites die op de één of andere manier gebruik maken van CSS, dit wordt voornamelijk veroorzaakt door het feit dat er in CSS opmaakmogelijkheden bestaan die niet in HTML gedefinieerd zijn. Als een website-bouwer gebruik wil maken van deze extra's dan moet hij of zij dus wel CSS gebruiken. In CSS zijn er meer opmaakmogelijkheden omdat het W3C een scheiding wil maken tussen de structuur en de opmaak van een document, de HTML code bevat alleen maar de structuur en de opmaak behoort in de CSS code geplaatst te worden.

Als de pagina opgemaakt is uit 2 verschillende talen, dan moeten er voorzieningen zijn om deze twee talen aan elkaar te koppelen. In HTML 3.2 zijn de eerste voorbereidingen voor style sheets (een correcte Nederlandse vertaling voor style sheet is 'stijlblad') al aanwezig, maar pas bij HTML 4 zijn er uitgebreide mogelijkheden gekomen om te bepalen welke delen van een pagina gekoppeld worden aan een bepaalde regel in de CSS. Hoewel veel browsers syntaxis fouten in de HTML zullen corrigeren, is het voor een optimaal functioneren van de HTML/CSS combinatie wenselijk dat de HTML 100% aan de standaarden voldoet.

In deze uitleg wordt verondersteld dat de lezer reeds voldoende kennis heeft van HTML, mocht u die niet hebben dan kunt u altijd naar een regio gaan waar men HTML cursussen houdt. Een andere optie is om te vragen of er iemand is uw eigen regio is die een cursus wil (en kan) organiseren. De veronderstelde HTML kennis betreft vooral de structuur van een HTML document en de betekenis van kreten als "tag", "element" en "attribuut".

Omdat vooral "tag" en "element" nog al eens door elkaar gehaald worden, zal ik de verschillen tussen deze twee nog even in het kort uitlegen. Voor het gebruik van CSS is het namelijk noodzakelijk dat duidelijk is wat een element is. Als je het alleen over dit stukje code hebt <h1>, dan heb je het over een tag. Maar als je het over <h1>Dit is een heading</h1> hebt, dan spreek je over een element.

De style sheet rules (stijlblad-regels) die gedefinieerd zijn in CSS zijn op verschillende manieren te koppelen aan de elementen waaruit een HTML document bestaat. Deze mogelijkheden zouden voldoende moeten zijn om aan alle wensen van de ontwerper te voldoen. De mogelijkheden die tot uw beschikking staan zijn:

Bovenstaande mogelijkheden zijn, om het verschil zo duidelijk mogelijk te maken, beschreven in het Nederlands. Ik wil nu in het kort ingaan op de manier waarop deze in HTML en CSS geïmplementeerd worden. Ik zal dit doen aan de hand van voorbeelden, hierbij wordt alleen dat stukje code eruit gelicht dat daadwerkelijk met de selectie van een stijl te maken heeft. Dit zijn dus geen volledige en aan de standaarden conformerende voorbeelden. Bij ieder voorbeeld staat ook een afbeelding van een mogelijke rendering van de code, deze voorbeelden zijn gemaakt met behulp van NetSurf.

We beginnen met een voorbeeld waarbij de selectie op basis van element plaats vindt. In dit geval worden alle identieke elementen voorzien van dezelfde stijl. Dus als men een H1-element via CSS van een stijl geeft, dan worden alle H1 elementen in het document van dezelfde stijl voorzien.

HTML
<h1>Dit is een koptekst</h1>
<p>En dit is een paragraaf!</p>

CSS
h1 {
  text-decoration: underline;
}
p {
  color: blue;
}

Het volgende voorbeeld toont een selectie op basis van het class attribuut, deze kan aan vrijwel ieder element, dat toegestaan is binnen de body van het document, worden toegevoegd. Alle elementen die voorzien zijn van dezelfde class, worden op een identieke wijze gerenderd. Verder is het mogelijk om in de HTML code meerdere klassen te combineren, de opmaak van allebei de klassen wordt dan toegepast op het geselecteerde element.
HTML
<div class="belangrijk">
  CSS en HTML is een uitstekende combinatie
</div>
<span class="waarschuwing">
  Kennis van HTML is noodzakelijk!
</span>
<div class="belangrijk waarschuwing">
  De HTML en CSS moeten wel aan de regels voldoen!
</div>
CSS
.belangrijk {
  font-style: italic;
  font-weight: bold;
}
.waarschuwing {
  color: red;
  background-color: yellow;
  margin-top: 10px;
}
.belangrijk, .waarschuwing {
  font-size: 150%;
}

Als laatste mogelijkheid is er de selectie op basic van een unieke code, hier wordt het id attribuut voor gebruikt. In een HTML document mag zo'n ID slechts 1 keer voorkomen, deze wordt namelijk niet alleen voor CSS gebruikt. Ook vanuit JavaScript wordt er, door middel van het Document Object Model (DOM), gebruik gemaakt van de inhoud van het id attribuut en zelfs HTML zelf maakt op bepaalde plaatsen gebruik van de inhoud van dit attribuut.

Nu lijkt het niet erg zinnig om vanuit een stijlblad slechts 1 uniek element te kunnen selecteren, niets is echter minder waar. Één van de sterke kanten van CSS is namelijk dat deze opgenomen kan worden in een extern bestand en gedeeld mag worden door verschillende HTML-bestanden. In dat geval kun je dus hetzelfde ID in meerdere bestanden gebruiken en hoef je hiervoor toch slechts 1 regel in de CSS definitie op te nemen.

Een andere toepassing waarbij stijlselectie op basis van het id attribuut handig kan zijn is bij de combinatie van meerdere selectie-methoden. Hoe dit precies in zijn werk gaat, daar hoop ik later nog op in te gaan. De mogelijkheid om de diverse methoden van een HTML-element te selecteren is een krachtige mogelijkheid binnen de CSS-standaard.
HTML
<div id="uitleg">
  Een pagina kan bestaan uit HTML en
  CSS, hierbij zorgt de HTML voor de 
  structuur van het document en de
  CSS voor de stijl (dat is de
  opmaak) van het geheel.
</div>
CSS
#uitleg {
  width: 200px;
  border: 
    2px solid dashed green;
  padding: 2px;
  color: blue;
  background-color: aqua;
  font-size: 1.5em;
}

Zoals wel zal zijn opgevallen hebben bovenstaande stijlbladen een bepaalde syntaxis, in het kort samengevat bestaat een CSS-regel uit de volgende elementen:

[selector] {
[declaratie]
(...)
}
[selector] {
[declaration]
(...)
}

De declaratie bestaat op zijn beurt weer uit de volgende 2 elementen:

[eigenschap]: [waarde]; [property]: [value];

Zoals u ziet, staat links de Nederlandse en rechts de Engelse benaming van de diverse onderdelen van een CSS rule. Het is handig als u beide benamingen kent, in dit document wordt namelijk altijd gebruik gemaakt van de Nederlandse omschrijving, maar veel documenten die u op het internet zult vinden maken gebruik van de Engelse benaming.

Hoewel dit artikel nog maar de basis van CSS besproken heeft, zullen er toch wel mensen zijn die al verder willen kijken. Voor die mensen is het wel handig om te beschikken over de officiële CSS-specificatie, deze is voor de CSS1-standaard beschikbaar in het Nederlands en het Engels.