HTML is tegenwoordig nagenoeg onlosmakelijk verbonden met CSS, maar wat is CSS nou precies en wat kun je ermee? Dat leg ik uit in mijn Handboek HTML 5 en CSS.

CSS is de afkorting van Cascading Style Sheets, in het Nederlands soms ook trapsgewijs opmaakmodel genoemd. Het begrip cascading/trapsgewijs is uiteraard een belangrijk kenmerk en dat wordt hierna uitgelegd. CSS is de opmaaktaal voor HTML (en XHTML, XML). Het definieert welk lettertype wordt gebruikt, in welke grootte en met welke kleur, of er een achtergrondkleur of achtergrondafbeelding is, hoeveel ruimte er tussen elementen moet zijn enzovoort. Alles (of bijna alles) wat u aan opmaak kunt bedenken, kan met CSS worden gemaakt. CSS wordt beheerd door het World Wide Web Consortium (W3C, waarover meer informatie in ‘t begin van mijn boek is te vinden)

Voorgeschiedenis

Als u vandaag begint met het vormgeven van webpagina’s is CSS de vanzelfsprekende techniek, maar dat is niet altijd zo geweest. Opmaak is lang verzorgd met opmaakelementen en opmaakattributen van HTML, die daaraan werden toegevoegd wegens gebrek aan beter. Toch begint de geschiedenis van CSS al in 1994, een eeuwigheid geleden in deze sector. De eerste aanbeveling kwam in 1996 – CSS level 1 – in 1998 gevolgd door CSS level 2. Pas in 2000 was er één browser (Internet Explorer 5 voor de Mac) die 99% van CSS 1 ondersteunde.

Er begint een verwarrende periode waarin de bekendste versie van CSS wordt ontwikkeld: CSS 2.1. Het duurt eindeloos voor deze het stadium van aanbeveling bereikt, pas in 2011 is het zover. Dat betekent niet dat CSS in de jaren daarvoor niet werd gebruikt. Het probleem was alleen dat door het ontbreken van een standaard elke browserfabrikant zijn eigen gang ging, deels op basis van het concept van CSS, deels naar eigen inzicht. Dat maakte het effect van CSS-kenmerken onvoorspelbaar, met (grote) verschillen tussen de browsers. Ontwikkelaars bedachten noodgedwongen de ene hack na de andere om de problemen te omzeilen.

Sinds 2011 gaat het dankzij het vaststellen van de standaard (de W3C-aanbeveling CSS Level 2 Revision 1) steeds beter. Het is onder browserfabrikanten ook niet meer gebruikelijk om met de bijzonderste zelfbedachte features te komen, zoals lang wel het geval was. Nu is de norm: overeenstemming over een standaard en die goed ondersteunen.

En toen was er CSS3

CSS3 is niet uit de lucht komen vallen (de eerste concepten dateren van 1999!) en eigenlijk bestaat het niet. Althans, het is niet één ding. Alle voorgaande CSSversies bestonden uit één groot document, maar CSS3 is opgebouwd uit modules. Er zijn modules voor kleur, selectors, achtergronden en randen, tekst, enzovoort. Het grote voordeel is dat de ontwikkeling veel sneller gaat. Elke module wordt in zijn eigen tempo ontwikkeld en kan als standaard worden ingevoerd zodra die klaar is. Er hoeft niet zoals vroeger te worden gewacht tot alle andere onderdelen ook klaar zijn.

Heeft een module het tot standaard geschopt, dan hoeft het daarna ook niet afgelopen te zijn. Terwijl er al een standaard is waarmee iedereen kan werken, kan als dat nodig is de ontwikkeling van de module doorgaan. Een volgende standaard is dan niet van niveau 1, maar van niveau 2, niveau 3 enzovoort. Een voorbeeld is de module CSS Backgrounds en borders Level 3 die een W3C-aanbeveling wordt en waarvan tegelijkertijd Level 4 al in de steigers staat.

💡Volg de ontwikkeling
Op www.w3.org/Style/CSS/current-work kunt u precies zien welke status de modules hebben en welke mogelijkheden u (op korte of lange termijn) kunt verwachten.

Terwijl nieuwe CSS-onderdelen worden ontwikkeld, zitten de browserfabrikanten niet stil. Die experimenteren al met de mogelijkheden die nog in ontwikkeling zijn en doordat browsers vaak worden geüpdatet, zijn nieuwe mogelijkheden snel beschikbaar. Dat heeft naast voordelen (u kunt al snel gebruikmaken van eigenschappen die nog niet zijn uitontwikkeld) ook nadelen. De uiteindelijke versie van de eigenschap kan net iets anders werken, u hebt soms nog een vendor prefix of een experimentele instelling nodig om de optie aan de praat te krijgen en u zult een oplossing moeten bedenken voor browsers die de optie niet herkennen. (Een vendor prefix is een voorvoegsel bij de naam van CSS-eigenschap, bijvoorbeeld -webkit- of -moz-. Dit komt in een volgend hoofdstuk nog aan de orde.) Per saldo is de modulaire opbouw een enorme verbetering, omdat nieuwe mogelijkheden sneller worden ontwikkeld en sneller stabiele browserondersteuning hebben.

CSS3 is gewoon CSS

Zoals gezegd is CSS3 niet uit de lucht komen vallen. In de modules wordt voortgeborduurd op CSS 2.1. Daardoor zullen webpagina’s die zijn vormgegeven met ‘oude’ CSS blijven werken. Het CSS3-deel bestaat uit het toevoegen van nieuwe eigenschappen of nieuwe waarden voor bestaande eigenschappen. In die zin kunt u CSS3 zien als een synoniem voor ‘alle mogelijkheden die zijn ontwikkeld sinds CSS 2.1’.

In het vervolg van dit boek gaat het gewoon over CSS. CSS3 is een handige naam om duidelijk te maken dat er een nieuw CSS-tijdperk is begonnen, maar in de praktijk doet het er niet toe of een module versie 1, 2, 3 of 6 is. Veel belangrijker is of de CSS die u wilt gebruiken door browsers wordt ondersteund. Dat zal dan ook uw uitdaging zijn bij het ontwikkelen van websites en apps: met welke CSSmogelijkheden kunt u een pagina-ontwerp het best uitwerken en hebben die mogelijkheden voldoende browserondersteuning?

Waarom CSS zo handig is

Zelfs als u de dagen van HTML-opmaakelementen (, , ) en HTML-opmaakattributen (color, size) niet hebt meegemaakt, kunt u zich waarschijnlijk wel een voorstelling maken van de ellende. Alle opmaak moest in de HTML-code worden opgenomen en dat is een onderhoudsnachtmerrie. Het gaat immers niet om één pagina maar om complete websites. Lay-outs waren alleen mogelijk met tabellen genest tot vele niveaus diep en ook dat is nauwelijks onderhoudbaar.

De boodschap zal duidelijk zijn, CSS maakt het vormgeven en opmaken van webpagina’s een stuk eenvoudiger (en leuker, veelzijdiger, …):

• alle opmaak voor elementen met vergelijkbare kenmerken past in één opmaakregel;
• de lay-out voor pagina’s en componenten op die pagina’s kan worden verdeeld over behapbare en logisch ingedeelde bestanden;
• de lay-out kan veel eenvoudiger worden aangepast door de ontwerper en kan zich automatisch aanpassen aan het weergaveapparaat;
• een CSS-bestand hoeft maar één keer te worden geladen en is dan beschikbaar voor alle HTML-pagina’s;
• het HTML-bestand is schoner en beter leesbaar, omdat alle opmaakinformatie in het CSS-bestand staat.

Een nadeel van CSS is de groeiende complexiteit. Met CSS kan steeds meer, maar u moet ook steeds meer eigenschappen en waarden kennen. Het lukt steeds beter om pagina’s te maken die zich naadloos aanpassen aan elk schermformaat, maar de eigenschappen waarmee u dat doet zijn ingewikkelder geworden. CSS-bestanden worden groter en moeilijker te lezen. Dat vraagt een gestructureerde manier van werken en goede documentatie. Dergelijke best practices komen aan het eind van dit hoofdstuk aan bod, maar het is goed als u zich hier van het begin af aan bewust van bent.

Handboek HTML 5 en CSS, 6e editie

HTML en CSS zijn twee onmisbare technieken voor het maken van webpagina’s en webapps. Zonder HTML zijn er geen webpagina’s en zonder CSS zien ze er wel erg kaal uit. In deze zesde, bijgewerkte editie van het Handboek HTML 5 en CSS leert u met beide webtalen werken. U leert eerst hoe u de content markeert met HTML. Daarna maakt u de onderdelen van de pagina op met CSS. Het uitgangspunt daarbij is dat u niet alleen leert dát dingen werken, maar vooral waaróm ze werken.

U krijgt uitleg over het structureren van HTML-documenten en het markeren van alle onderdelen: paginakop, artikelkoppen, tekst, lijsten, hyperlinks, afbeeldingen, video en audio, formulieren en tabellen. Een goede paginastructuur in HTML is de beste garantie voor een geslaagde lay-out en opmaak met CSS. 

De tweede helft van het boek behandelt het maken van lay-outs en het opmaken van de onderdelen met CSS. Er wordt uitgebreid ingegaan op responsive design met alle technieken die CSS daarvoor biedt: gridlay-out, flexbox, multi-column en positionering.

U leert hoe u lettertypen downloadt, tekst opmaakt, navigatiemenu’s vormgeeft, kleur gebruikt en achtergronden maakt. Ook het werken met CSS-functies en het maken van overgangen, animaties en transformaties in 2D en 3D komen aan bod. 

Het boek is uitgebreid met uitleg over toegankelijkheid, container queries, een nieuw hulpmiddel voor responsive design, en cascade layers, voor meer controle over de cascade. 

Op handboek-html-css.nl vindt u code en (interactieve) voorbeelden.

Dit leerboek en naslagwerk geeft een stevige ondergrond voor het werken met de technieken die de basis vormen van modern webdesign. 

Website: handboek-html-css.nl 

Peter Doolaard

Peter Doolaard is auteur van het Handboek HTML5 en CSS3. Dat geeft een behoorlijk compleet overzicht van wat HTML en CSS te bieden hebben. Hij werkt nu aan een nieuw boek: Websites bouwen met HTML, CSS en JavaScript. Een praktisch doe-boek, met vragen, opdrachten en projecten. En natuurlijk uitleg over HTML-elementen, CSS-eigenschappen en JavaScript-opdrachten. De komende tijd publiceert Computer Creatief artikelen die je een idee geven van wat je van het nieuwe boek kunt verwachten. Bekijk alle boeken van Peter.