Cascading Style Sheets

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 te 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 stembrowser kan via CSS zelfs worden bepaald of de tekst door een mannen- of vrouwenstem wordt uitgesproken en wat de snelheid en toonhoogte is.

a.external:hover {background-color:yellow}

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 pseudoklassen. Daarmee wordt aangegeven dat de stijl van een element afhankelijk is van een status. Een bekende pseudoklasse 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 pseudoklasse is de hover waardoor de stijl van een element anders wordt als de muis in het element staat.

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 met !important-regel in de stijldefinitie.
2. stijl aangegeven in de tag van het element.
3. stijl volgens de naam van de id in de tag.
4. stijl volgens de naam van de class in de tag.
5. stijl van het parent-element.
6. stijl volgens de naam van de tag (aspecten van stijl die niet expliciet zijn aangegeven worden bepaald door de ingebouwde stylesheet in de browser).

Naast deze prioriteit heeft CSS nog een prioriteit wat betreft id en class. Het is afhankelijk van waar deze worden aangeschreven.

1. beschreven tussen de body-tags
2. beschreven tussen head-tags
3. beschreven in een extern gekoppeld stylesheet
4. beschreven in een geïmporteerde stylesheet in een extern gekoppelde stylesheet.

Vanaf het begin van het wereldwijde web heeft elke browser zijn eigen interne stylesheet gehad, die ervoor 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 gebruikmaakte 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 het 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 in mei 1998. Een aanpassing van CSS2 (CSS2 revisie 1, 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.

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 van schrijven (2018) ondersteunen vrijwel alle browsers CSS3.

• Lijst van programmeertalen