Wat is CSS

Cascading Style Sheets (afgekort tot CSS) is een techniek voor de stijl (vormgeving) van webpagina's. De informatie over de vormgeving wordt toegevoegd aan de HTML-code van het document. Die informatie kan in het document zelf staan, maar ook in een extern document dat wordt geïmporteerd. Een dergelijk apart geïmporteerd document wordt ook wel stylesheet genoemd. Een stylesheet biedt de mogelijkheid inhoud en vormgeving van een document van elkaar te scheiden en op die manier een consistente vormgeving over meerdere documenten te bereiken.

Een belangrijke reden voor de introductie van Cascading Style Sheets is om de vormgeving van webpagina's te standaardiseren, zodat verschillende webbrowsers dezelfde pagina op dezelfde wijze aan de gebruiker tonen. Het World Wide Web Consortium (W3C) heeft daartoe de standaard vastgelegd. De vastgelegde standaard is in de loop van de jaren uitgebreid. De oorspronkelijke standaard staat bekend als CSS1. Latere uitbreidingen staan bekend als CSS2 en CSS3. Deze laatste uitbreiding (CSS3) is gedeeltelijk nog in ontwikkeling en is als zodanig geen officiële standaard.

Moderne browsers ondersteunen CSS1 inmiddels volledig. De ondersteuning voor CSS2 is minder. Omdat CSS3 nog geen officiële standaard is, is daar slechts experimentele ondersteuning voor. De meest gebruikte browser, Microsoft Internet Explorer (versie 6.0) wordt bekritiseerd omdat het onvoldoende ondersteuning van CSS2 biedt. In oktober 2006 heeft Microsoft een nieuwe versie van Internet Explorer (versie 7) uitgebracht. Microsoft heeft daarin grote verbeteringen aangebracht in de ondersteuning voor CSS2.

Aspecten van stijl en overerving
Met Cascading Style Sheets kan de vormgeving van elk element in een webpagina worden bepaald. Een element van een webpagina wordt gedefinieerd door het gebruik van een HTML-tag. De term cascading geeft aan dat de stijl van elementen overerving vertoont: elk element neemt de stijl over van zijn parent-element, tenzij er een eigen stijl voor dat element is gegeven. Elke webbrowser heeft een ingebouwde stylesheet die de vormgeving van alle elementen bepaalt als er geen stylesheets aan een document worden meegegeven.

Een stijl bestaat uit een aantal aspecten zoals lettertype en voor- en achtergrondkleur. Ook breedte van kantlijnen, de horizontale en verticale positie, de zichtbaarheid, de transparantie, of een element boven of onder een ander element ligt en vele andere aspecten kunnen in een stylesheet worden aangegeven.

Elk aspect van de stijl wordt onafhankelijk overgeërfd door child-elementen in een webpagina. Daarom hoeven alleen de afwijkende aspecten van een stijl te worden aangegeven. Als er in de stijl een lettertype wordt aangegeven voor het hele document, dan wordt dat lettertype in het hele document gebruikt en hoeft het niet voor elk element apart te worden aangegeven.

Niet alle aspecten van een stijl erven over. Bijvoorbeeld de breedte en hoogte van een element erven niet over. Als een element een box vormt met gespecificeerde breedte, dan refereert een relatieve aanduiding voor breedte van child-elementen aan de breedte van de box. Als de breedte van een tabel op 100 pixels is gezet en een cel in die tabel heeft breedte 25%, dan betekent dat 25% van 100 pixels.

CSS biedt, met behulp van mediatypes, de mogelijkheid om voor verschillende typen media, waarop een webtoepassing kan worden uitgevoerd, een andere stijl de definiëren. Daardoor kan de stijl van een webpagina worden aangepast aan weergave op een beeldscherm, op papier (als de pagina wordt afgedrukt), een handheld of een brailleleesregel. In geval van spraaksynthese door middel van een voicebrowser kan via CSS zelfs worden bepaald of de tekst door een mannen- of vrouwenstem wordt uitgesproken en wat de snelheid en toonhoogte is!

Klassen
De klasse van een HTML element wordt aangegeven door de naam van de tag. Het is echter mogelijk om aan een tag een klasse toe te voegen (class="verzonnen_klassenaam"), waardoor het element de stijl van de corresponderende klasse in het stylesheet overneemt. De aspecten van stijl die niet in deze corresponderende klasse worden aangegeven, erft het element echter nog steeds van het parent element of van de tag klasse.

CSS kent ook pseudo-klassen. Daarmee wordt aangegeven dat de stijl van een element afhankelijk is van een status. Een bekende pseudo-klasse is de status van een link, de tekst van een link kan een andere kleur hebben als het betreffende document recent is bekeken. Een andere pseudo-klasse is de hover waardoor de stijl van een element anders wordt als de muis in het element staat.