Cascading Style Sheets

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.

Inhoud 1 Aspecten van stijl en overerving 2 Klassen 3 Prioriteit 4 Geschiedenis 5 Ondersteuning 6 Externe links

[bewerk] 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 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 webtoepassingen een andere stijl de definiëren. Daardoor kan de stijl een webpagina worden aangepast aan weergave op een beeldscherm, op papier (als de pagina wordt geprint), 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!

[bewerk] 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.

[bewerk] Prioriteit

Omdat er verschillende manieren zijn om een stijl aan te geven, is de prioriteit hiervan expliciet geregeld. Hieronder staat de prioriteit aangegeven (een hogere prioriteit heeft voorrang over een lagere prioriteit). Elk aspect van stijl wordt daarbij afzonderlijk bekeken.

1. stijl aangegeven in de tag van het element.
2. stijl volgens de naam van de class in de tag.
3. stijl volgens de naam van de tag (aspecten van stijl die niet expliciet zijn aangegeven worden bepaald door de ingebouwde stylesheet in de browser).
4. stijl van het parent-element.

[bewerk] Geschiedenis

Vanaf het begin van het World Wide Web heeft elke browser zijn eigen interne stylesheet gehad, die er voor zorgde dat de tags in een document werden geïnterpreteerd. Het concept van cascading style sheets werd in 1994 voorgesteld door de Noor Håkon Wium Lie. Hij besloot samen te werken met de Nederlander Bert Bos die in die tijd werkte aan een eigen browser (Argo) die gebruik maakte van stylesheets.

Het voorstel werd door Håkon Wium Lie gepresenteerd op de "Mosaic and the Web"-conferentie in Chicago, en samen met Bert Bos, nogmaals in 1995. In die tijd was het W3C in oprichting en organiseerde een project om tot een standaard voor CSS te komen. In december 1996 werd de CSS1-aanbeveling gepubliceerd. In 1997 begon een werkgroep van de W3C aan uitbreiding van de specificatie. Dit resulteerde in de CSS2-aanbeveling, gepubliceerd mei 1998. Een aanpassing van CSS2 (CSS2 revisie één, CSS2.1 genoemd) wijzigde delen van de CSS2-standaard, onder andere werden enkele nieuwe waarden toegevoegd, en niet-geïmplementeerde delen uit de standaard verwijderd. Een verdere uitbreiding van CSS tot CSS3 is in ontwikkeling bij het W3C.

[bewerk] Ondersteuning

Hoewel de CSS1-aanbeveling in 1996 werd gepubliceerd, duurde het tot 2000 voordat er een browser beschikbaar kwam die deze specificatie volledig ondersteunde. De eerste browser die deze ondersteuning bood was Internet Explorer 5.0 voor de Mac. Andere browsers volgden toen echter snel.

Op dit moment is er een enkele browser die CSS2 volledig ondersteunt, te weten Safari 2 op Mac OS X. Deze geeft op dit moment de beste ondersteuning, gevolgd door de "Presto"-engine (Opera browser), op korte afstand gevolgd door browsers gebaseerd op de "Gecko"-engine (ontwikkeld door Mozilla), en de "KHTML"-engine (o.a. gebruikt in de Konqueror-browser). Nieuwere browsers ondersteunen ook al enkele delen van de CSS3-specificatie.

De ondersteuning voor CSS2 van Internet Explorer is de minste van alle moderne browsers. Eén van de bekendste problemen van Internet Explorer op dit gebied staat bekend als de Internet Explorer box model bug. Volgens de CSS2-specificatie is de aangegeven breedte (width) van een element een maat voor de inhoud van het element (zonder de randen mee te rekenen). Internet Explorer interpreteert de breedte echter als externe breedte (dus met de randen meegerekend). Deze bug komt voor in de versies 4.x en 5.x. In versies 6 en hoger is deze bug opgelost, maar het blijft mogelijk gebruik te maken van de verkeerde interpretatie van het boxmodel door pagina's in Quirksmode weer te laten geven.

[bewerk] Externe links

• W3C CSS 1 aanbeveling (Engels)
• W3C CSS 2 aanbeveling (Engels)
• W3C CSS revisie 2.1 aanbeveling (Engels)
• W3C CSS3voortgang (Engels)
• Quirksmode (Engels) Website gewijd aan implementatie van CSS en javascript door verschillende browsers.
• CSS3 Preview (Engels) website gewijd aan CSS3
• Zengarden (Engels) Demonstraties van prachtige webdesigns met behulp van CSS stylesheets.

Webdesign
Opmaaktalen	HTML | XHTML | C-HTML | WML | XHTML Basic
Design	Cascading Style Sheets | XSL-FO | XSLT
Interactie	Document Object Model | HTML-event | HTML-scripting | JavaScript | Ajax | Dynamic HTML
Referentie	HTML-kleuren | HTML-tags | HTML-entiteiten | HTML-events
Details	Browser sniffing | User Agent | Cookie | Metatag | DTD | Broodkruimelnavigatie | Inline image | Java‑applet | Macromedia Flash | HTML‑formulier | Favicon | Frames | SVG | WAI
HTML-Editors	Dreamweaver | FrontPage | Nvu | Quanta Plus
Verwant	Wereldwijde web | Webbrowser | Webserver | Grafisch programma | Teksteditor | XML