Cascading Style Sheets (CSS) in het Nederlands vertaald, betekend zoveel als Trapsgewijse Opmaak Bladeren.
CSS is een opmaak model dat tekst en design van elkaar gaat scheiden.
Het concept en de naam CSS werd in 1994 van
de Noor Hakon Wium Lie ontwikkeld. In 1995 sloot de Nederlander Bert Bos zich bij de ontwikkeling aan.
Sinds 1996 heeft het World Wide Web Consortium (W3C) de verdere ontwikkeling op zich genomen.
CSS is een uitbreiding op HTML waarmee ontwerpers de weergave van pagina's en documenten beter kunnen regelen. Het werkt prettig en eenvoudig. In het opmaakmodel worden lettertype, de kleuren achtergronden en overige kenmerken van een document aangemaakt. Iedere pagina die aan de regels moet voldoen linkt eenvoudig het bestand. Mocht de ontwerper bv. het lettertype willen wijzigen, dan hoeft de wijziging enkel maar in het opmaakmodel te gebeuren en wordt doorgevoerd in alle webpagina's.
Er zijn drie mogelijkheden om CCS in combinatie met HTML te gebruiken.
2. aan het begin van de HTML-pagina.
3. opgeslagen in een extern CSS-bestand.
Voorbeeld:
De opmaak voor de titeltekst worden in de style opmaak bepaald door de eigenschap en de waarde er van. De kleurinstelling color is de eigenschap en gray is vervolgens de waarde. De eigenschap eindigt met een : en de waarde die eraan gekoppeld is eindigt met een ;. Eigenschap en waarde vormen samen de declaration.
Het resultaat is, dat de titel (h1) in de kleur grijs wordt weergegeven. Natuurlijk is er nog meer mogelijk, zoals een achtergrondkleur, lettertypen, afmetingen etc.
Er zijn nog meer mogelijkheden, maar het nadeel is dat het programma minder goed leesbaar wordt. Verder is het makkelijker om bepaalde zaken centraal te regelen zodat er ruimte qua codering gespaard kan worden.
De opmaak in zwarte letters beginnen met h1, hetgeen aangeeft wie de eigenaar is of beter gezegd waar de opmaak moet worden uitgevoerd. Dit heet een Selector. In dit geval verwijst de selector h1 naar de h1 tag. Vervolgens staat de opmaak tussen accolades, die het begin en einde van de instructies aangeven. Alle instellingen die hier gegeven worden hebben betrekking op het h1 gebied, de titel.
De meeste websites bestaan echter uit meerdere HTML-pagina's en derhalve is het praktisch als er een uniforme instelling voor alle pagina's kan worden gekozen door middels een extern CSS document. Verder is het natuurlijk wel zo, dat het CSS-document bekend moet zijn bij de HTML-pagina.
De verbinding met een extern CSS-bestand wordt in het <head> gedeelte van de HTML-pagina middels de tag <link> geplaatst, zoals hier beschreven. De <link> tag hoeft in HTML niet te worden gesloten met </link>. In XHTML is het echter wel verplicht.
In HTML wordt aangegeven dat er met link een externe relatie wordt gelegd middels rel="stylesheet".
Met de aanduiding type= "text/css", wordt HTML duidelijk gemaakt dat het hier om een CSS - tekstbestand gaat.
De naam van het stylesheetdocument is in dit lesvoorbeeld "style1.css"
en is een HTMLreferentie, afgekort href.
De inhoud van het externe stylsheet-document style1.css zou zo uit kunnen zien:
Het programma is hierdoor een stuk kleiner en leesbaarder geworden. De declarations in body zijn overigens van toepassing op de hele HTML-site, behalve in h1 zoals in dit voorbeeld.