Cascading Style Sheets (afgekort tot CSS), stijlbladen, zijn een mogelijkheid om de vormgeving van webpagina's los te koppelen van hun feitelijke inhoud en centraal vast te leggen. Het Engelse "style" heeft de betekenis van "opmaak", niet van schrijfstijl. Het begrip "cascading" (als een waterval) verwijst naar de mogelijkheid van het vererven van opmaak-eigenschappen (zie onder).
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.
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!
Hieronder staat een voorbeld hoe u dit moet regelen. De code staat in de header.
<link rel="stylesheet" href="/css/style.css" type="text/css" />
<link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/printer.css" type="text/css" media="print" />
Zonder vermelding van media geldt de stylesheet voor alle media.
| Media | Apparatuur |
|---|---|
| all | Alle onderstaande media |
| braille | Brailleapparatuur zoals brailleregels |
| embossed | Brailleprinters |
| handheld | Draagbare apparatuur |
| Printers en afdrukvoorbeelden | |
| projection | Presentatiesystemen zoals videoprojectors |
| screen | Kleurenmonitors voor computers |
| speech | Spraaksynthesizers |
| tty | Media met een vaste letterbreedte, vooral terminals |
| tv | Kleurentelevisie met geluid |
Voor het bepalen van de weergave van de inhoud geld de volgende volgorde:
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.
De eerste laag met stijlinformatie zijn de instellingen van de browser. Indien er verder geen informatie wordt geleverd, dan wordt dit gebruikt. Deze standaardstijl van de browser kan door de grbruiker beperkt worden aangepast.
Hierna komen de stylesheets in de header. Handig is om een globale stylesheet te maken die gelinkt wordt zonder mediatype en daarna voor het screen, printer een aanvullende.
In de header kan ook tussen de style tags stijlinformatie geplaatst worden. Dit gebruik je eigelijk voor een pagina waar je iets speciaals mee doet, dus eenmalig. Ook voor testdoeleinde kun je hier tussen nieuwe code plaatsen en ontwikkelen.
De laatste op lijn zijn de style atrribuuts binnen een tag. Ook deze zijn eenmalig. Hier spaarzaamgebruik van maken. Gebruik je een bepaald aanpassing vaker dan deze in de stylesheet als class aanmaken.