Wat CSS doet

Met één CSS-bestand kun je alle pagina's van een site tegelijk anders vormgeven. Dat was het belangrijkste argument voor CSS toen het W3C in december 1996 CSS niveau 1 publiceerde.

Structuur in HTML, uiterlijk in CSS

HTML zegt wat elk onderdeel van een pagina is: een kop, een lijst, een formulier. CSS, kort voor Cascading Style Sheets, zegt hoe die onderdelen eruit moeten zien: hun kleuren, lettertypen, afmetingen, tussenruimte en positie op het scherm. Het scheiden van beide heeft praktische voordelen. Je kunt het uiterlijk van een hele site veranderen door één stylesheet te bewerken, dezelfde HTML kan er anders uitzien op een telefoon, een groot beeldscherm en papier, en lezers kunnen hun eigen stijlen toepassen, zoals grotere tekst, zonder de pagina te verstoren.

Håkon Wium Lie begon in oktober 1994 bij CERN aan CSS te werken. Bert Bos sloot zich in 1995 aan en het W3C publiceerde CSS niveau 1 op 17 december 1996 als Recommendation. CSS 2 volgde in mei 1998. Sindsdien is CSS opgedeeld in modules, zoals Color, Selectors, Flexbox en Grid, die elk in hun eigen tempo worden ontwikkeld door de W3C CSS Working Group. Er bestaat geen enkelvoudige CSS4; de werkgroep publiceert een momentopname waarin staat welke modules stabiel zijn.

De opbouw van een regel

Een stylesheet is een lijst regels. Elke regel begint met een selector, die aangeeft op welke elementen hij van toepassing is, gevolgd door een declaratieblok tussen accolades. Binnen het blok bestaat elke declaratie uit een eigenschap, een dubbele punt, een waarde en een puntkomma. In de regel hierboven selecteert h1 elke kop van niveau één. De twee declaraties maken die koppen blauw en 32 pixels hoog. Spaties en regeleinden binnen een regel doen er niet toe, dus de meeste mensen zetten elke declaratie op een eigen regel om het leesbaar te houden.

Als de browser een declaratie tegenkomt die hij niet begrijpt, zoals een verkeerd gespelde eigenschap of een onzinnige waarde, slaat hij die ene declaratie over en gaat hij verder met de volgende. Dat is opzettelijk: zo kunnen nieuwe CSS-functies worden toegevoegd zonder oudere browsers te verstoren. De keerzijde is dat één ontbrekende puntkomma ongemerkt de volgende declaratie kan opslokken, omdat beide samenvloeien tot één ongeldige declaratie. Als een stijl niet wordt toegepast, controleer dan eerst de leestekens. Commentaar schrijf je als /* like this */.

Drie manieren om CSS toe te voegen

<!-- 1. External stylesheet: one file for the whole site -->
<link rel="stylesheet" href="styles.css">

<!-- 2. Internal stylesheet: rules for this page only -->
<style>
  p { line-height: 1.5; }
</style>

<!-- 3. Inline style: one element only -->
<p style="color: green;">Fresh today</p>

Een externe stylesheet, gekoppeld vanuit de <head> met <link rel="stylesheet">, is de gebruikelijke keuze voor een echte site: elke pagina deelt hem en de browser downloadt hem eenmaal en bewaart hem in de cache. Een <style>-element bevat regels voor één pagina, zoals je in de oefeningen van deze cursus gebruikt. Het attribuut style past declaraties toe op één element. Dat is handig voor een snelle test maar lastig te onderhouden, omdat hetzelfde uiterlijk op elk element herhaald moet worden.

De browser heeft al stijlen

Zelfs een pagina zonder CSS heeft enige opmaak: koppen zijn groot en vet, links blauw en onderstreept en lijsten ingesprongen. Dat komt uit de standaardstylesheet van de browser, de user agent stylesheet. Je eigen regels worden daarbovenop toegepast. Daarom was de bakkerijpagina uit de HTML-cursus al leesbaar zonder CSS en daarom verandert een goede stylesheet alleen wat nodig is.