Cascading Style Sheets De CSS-informatie voor de vormgeving van het document wordt toegevoegd aan de HTML-code ervan. Die informatie mag in het HTML-bestand zelf staan, maar ook in een apart bestand waar het HTML-document naar verwijst. Een dergelijk extern bestand wordt ook wel stylesheet genoemd.
Een belangrijke reden voor de introductie van Cascading Style Sheets was de eenvoudigere en consistentere vormgeving van webpagina's, met minder webbrowser-specifieke eigenaardigheden. Het World Wide Web Consortium (W3C) heeft daartoe de standaard vastgelegd. De vastgelegde standaard is in de loop van de jaren significant 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 en CSS2. CSS3 is nog geen officiële standaard, hierdoor is er minder ondersteuning door webbrowsers.
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!
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.
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 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 ondersteunen vrijwel alle browsers CSS2.
Kenmerkend voor web typografie is dat de fonts die gebruikt worden aanwezig dienen te zijn op de computer van de gebruiker die de website bekijkt. Wanneer dit niet het geval is wordt er een alternatief gekozen. Sinds de introductie van CSS is het mogelijk om zelf lettertypes te kiezen waar de browser op terugvalt bij het ontbreken van het lettertype op de computer van de gebruiker. Hiervoor koos de browser zelf een alternatief, zoals sans-serif of monospace. Ook werd in de eerste versie van CSS2 de functie ondersteunt om lettertypes te downloaden bij het bezoeken van een website, wat het mogelijk maakte om niet-standaard lettertypes te gebruiken. Deze functionaliteit werd echter weer verwijderd in CSS2.1. Windows Internet Explorer bleef de download functionaliteit ondersteunen vanaf IE4. De CSS3 standaard maakt het downloaden van fonts wederom mogelijk, en is reeds geïmplementeerd in Safari 3.1, Firefox 3.5 en Opera 10.
De term Web-safe fonts duidt op lettertypes die op vrijwel alle computers geïnstalleerd zijn. Deze lettertypes worden door meestal door website ontwerpers gebruikt, om de kans te vergroten dat de tekst in het gekozen lettertype wordt weergegeven. Hiermee wordt inconsistentie in het ontwerp tegengegaan.
Microsoft initieerde in 1996 het Core fonts for the Web project. Het doel van dit project was het gratis verspreiden van een standaard set lettertypes die ontworpen waren om goed leesbaar te zijn op het scherm, een grote verscheidenheid aan stijlen te bieden, en geschikt te zijn voor internationaal gebruik.
Met de introductie van CSS1 werd het mogelijk om eigenschappen als 'font-family', 'font-style' en 'font-weight' aan lettertypen toe te kennen. De eigenschap 'font-family' maakt het mogelijk alternatieven te specificeren in het geval van het ontbreken van het gebruikte lettertype op de computer van de gebruiker. Van deze functionaliteit wordt tot op heden nog steeds veel gebruikgemaakt. Het specificeren van het lettertype bijbehorende alternatieve gaat als volgt: font-family: Arial, Helvetica, "Liberation Sans", sans-serif; Hierbij zijn de lettertypen gesorteerd op prioriteit. De browser begint bij het eerste lettertype en gaat zo nodig verder in de lijst. Vaak gebruikt men als laatste alternatief de term 'sans-serif' of 'serif'. Dit is een instructie voor de browser om respectievelijk een schreefloos lettertype, dan wel lettertype met schreef te kiezen.
CSS2 introduceerde voor het eerste de mogelijkheid om fonts in te bedden in een webpagina, middels de @font-face regel. In de CSS2.1 specificatie was deze regel weer verwijderd. Microsoft Internet Explorer bleef de functionaliteit echter ondersteunen.
In de CSS3 specificatie is de @font-face regel wederom opgenomen. Dit maakt het mogelijk om CSS3 ondersteunende browsers zoals de Firefox (vanaf versie 3.5), Safari (vanaf versie 3.1) en Opera (vanaf versie 10) lettertypes in te bedden.
Het inbedden van lettertypes door middel van de @font-face regel is een controversieel onderwerp vanwege mogelijke auteursrechtschendingen, omdat lettertypes als software beschouwd worden. Meestal wordt namelijk niet door de browser gecheckt of een lettertype zomaar gebruikt of gedownload mag worden. Niettemin is de verwachting dat met de introductie van CSS3 deze optie vaker gebruikt zal worden.
TrueDoc, de eerste standaard voor het inbedden van lettertypen werd ontwikkeld door Bitstream. Netscape 4 ondersteunde het TrueDoc formaat, maar vanaf Netscape 6 werd deze ondersteuning stopgezet, vanwege het feit dat Netscape de broncode van dit formaat niet kon prijsgeven.
Internet Explorer 4 en hoger ondersteunen het imbedden van fonts via hun propriëtaire formaat Embedded OpenType. EOT lettertypen worden ingebed via de @font-face regel. DRM technieken worden gebruikt om auteursrechtenschendingen tegen te gaan.
Lettertypes zijn onderdeel van de SVG specificatie sinds versie 1.1. Safari introduceerde ondersteuning van SVG lettertypen in versie 3 en Opera 10 ondersteunt ze sinds september 2009.
Mozilla Firefox, Safari, Opera ondersteunen op dit moment TrueType/OpenType formaten.
Voor het gebruik van niet-standaard lettertypes bestaan er ook alternatieven naast het inbedden. Een veelgebruikte methode is 'image replacement'. Hierbij wordt de tekst in de vorm van een afbeelding over de oorspronkelijke tekst heen gezet. Dit is voordelig in verband met zoekmachine-optimalisatie. Om dit effect te bereiken worden onder andere de op php en JavaScript gebaseerde Facelift Image Replacement (FLIR) en de op Flash gebaseerde Scalable Inman Flash Replacement (sIFR).