Zoals gezegd kan je de Style Sheets zowel in een apart bestand zetten, als in de hoofding van je HTML-pagina zelf. Het beste is te werken met aparte bestanden, omdat je dan slechts 1 bestand moet aanpassen als je een globale verandering in stijl op je site wil doorvoeren. Aparte pagina’s kan je trouwens nog altijd naar believen loskoppelen van de Style Sheet.

Als je de Style Sheet in je hoofding definiërt, koppel je zoals gezegd ook niet echt je inhoud los van je opmaak.

Een aparte Stylesheet maken

Voor een aparte Style Sheet maak je een lege pagina met enkel de statements tussen de <style>-tags :

<style type="text/css"> 

statement 1 {
...
{

statement 2 {
...
{

...

</style>

Je bewaart het bestand vervolgens met de extensie .css

Een pagina koppelen aan het CSS-bestand

De manier om een apart CSS-bestand te koppelen aan een HTML-pagina, is door in de hoofding van de aparte pagina's een link naar het CSS-bestand te plaatsen. De browser leest nu de pagina, ziet de vermelding naar de Style Sheet, laadt de Style Sheet binnen en gebruikt die dan om de pagina op te maken.

Je kan ook naar verschillende Style Sheets verwijzen in een HTML-pagina. Hier is een voorbeeld van zo’n link om naar een Style Sheet te verwijzen :

<link rel="stylesheet" type="text/css" href="http://www.webmasterstart.nl/styles/style.css" />

Wil je dus dat een pagina zich niets aantrekt van een Style sheet, dan leg je gewoon geen link.

De browser wordt verteld dat er een Style Sheet aan de pagina gelinkt is, en welk type voor Style Sheet. In dit geval is het type een gewoon tekstbestand opgesteld volgens de CSS-aanbeveling. In de toekomst zal ook Extensible Style Language (XSL) een belangrijke methode worden om Style Sheets op te stellen.

Tenslotte wordt aan de browser verteld waar hij de Style Sheet kan vinden. Het gebruik van “/>” is de correcte manier om een lege tag af te sluiten. Dit is een tag die op zichzelf staat (geen eindtag), en die worden op deze manier afgesloten.

Nu we weten hoe een Style Sheet er ongeveer uitziet, gaan we de regels bekijken om een correcte Style Sheet op te stellen.