Remove ads
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 overerven van opmaak-eigenschappen.
| Cascading Style Sheets | ||||
|---|---|---|---|---|
| Status | Gepubliceerd | |||
| Startjaar | 1994 | |||
| Auteurs | W3C | |||
| Gerelateerde standaarden | HTML | |||
| Afkorting | CSS | |||
| Domein | Wereldwijd web | |||
| Website | Website | |||
| ||||
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 aanmerkelijk 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.
Remove ads
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.
Remove ads
De syntaxis van Cascading Style Sheets
In een stylesheet wordt de stijl van een klasse geformuleerd met:
tagname.classname:pseudoclass {
gespecificeerde stijlen}
Het toevoegen van de onderstaande stijl aan de stylesheet van de Wikipedia resulteert erin dat alle externe links een gele achtergrond krijgen als je muispijl erover gaat:
a.external:hover {background-color:yellow}
- de genoemde tag is a, dat is de tag voor een hyperlink.
- de genoemde class is external. De software van de Wikipedia geeft alle externe links de klassenaam external. Dit is een verzonnen naam en buiten de Wikipedia dus niet algemeen geldig.
- de genoemde pseudoclass is hover. Dat betekent dat de stijl alleen wordt toegepast als de muis in het betreffende deel van de pagina staat.
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.
Remove ads
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.
- stijl met !important-regel in de stijldefinitie.
- stijl aangegeven in de tag van het element.
- stijl volgens de naam van de id in de tag.
- stijl volgens de naam van de class in de tag.
- stijl van het parent-element.
- 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.
- beschreven tussen de body-tags
- beschreven tussen head-tags
- beschreven in een extern gekoppeld stylesheet
- beschreven in een geïmporteerde stylesheet in een extern gekoppelde stylesheet.
Remove ads
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.
Remove ads
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.
Frameworks
CSS-frameworks zijn vooraf voorbereide bibliotheken die bedoeld zijn om het opmaken van webpagina's met behulp van de Cascading Style Sheets-taal eenvoudiger en meer aan de standaarden te laten voldoen. CSS-frameworks omvatten Blueprint, Bootstrap, Cascade Framework, Foundation en Materialise. Net als programmeer- en scripttaalbibliotheken, worden CSS-frameworks meestal opgenomen als externe .css-bladen waarnaar wordt verwezen in de HTML-tag <head>. Ze bieden een aantal kant-en-klare opties voor het ontwerpen en opmaken van de webpagina. Hoewel veel van deze frameworks zijn gepubliceerd, gebruiken sommige auteurs ze vooral voor snelle prototyping, of om te leren van, en geven ze de voorkeur aan 'handgemaakte' CSS die geschikt is voor elke gepubliceerde site zonder de ontwerp-, onderhouds- en downloadoverhead van veel ongebruikte functies.[1]
Ontwerpmethodologieën
Naarmate de omvang van de CSS-bronnen die in een project worden gebruikt, toeneemt, moet een ontwikkelingsteam vaak beslissen over een gemeenschappelijke ontwerpmethodologie om ze georganiseerd te houden. De doelen zijn het gemak van ontwikkeling, het gemak van samenwerking tijdens de ontwikkeling en de prestaties van de geïmplementeerde stylesheets in de browser. Populaire methodologieën zijn onder meer OOCSS (objectgeoriënteerde CSS), ACSS (atomaire CSS), oCSS (organische Cascade Style Sheet), SMACSS (schaalbare en modulaire architectuur voor CSS) en BEM (block, element, modifier).
Remove ads
Wikiwand in your browser!
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.
Remove ads