Cascading Style Sheets (afgekort tot CSS) is een techniek voor de stijl (vormgeving) van webpagina's. De informatie over de vormgeving kan in het HTML document zelf staan maar ook in een extern bestand. De verzameling van stijl regels noemen we stylesheet. In het begin renderde iedere browser de HTML op een vast wijze waardoor iedereen die een beetje af wilde wijken van de standaard vormgeving allerlei truuks ging toepassen om dit te realiseren. Het aantal atributen van HTML tags groeide ook gestaag en kon de vraag naar nieuwe vormgeving niet bijbenen. Door middel van CSS was de vormgeving en de HTML opmaak te scheiden, de HTML codering geeft alleen de structuur weer de presentatie zit in de stylesheet.

CSS heeft al een behoorlijke evolutie doorgemaakt de laatste jaren, in 2010 ziiten we momenteel op versie level 3. Dit bevat alles van CSS 2.1 met daarbij uitbreidingen met nieuwe selectors, opvallende randen en achtergronden, vertikale tekst, gebruikersinteractie, spraak en nog een paar andere zaken. CSS level 2 bevat alles van CSS 1 met daarbij uitbreidingen voor absolute positionering, automatische nummering en pagina-eindes. CSS level 1 was de eerste versie en bevat mogelijkheden voor lettertypes, kleuren, marges, enze. Elke nieuwe versie voegt nieuwe eigenschapen en moeglijkheden toe.

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 heeft 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 te worden aangegeven. Niet alle aspecten van een stijl erven over. Bijvoorbeeld de breedte en hoogte van een element erven niet over.

CSS biedt, met behulp van mediatypes, de mogelijkheid om voor verschillende webtoepassingen een andere stijl de definiëren. Daardoor kan de stijl een webpagina worden aangepast aan weergave op een beeldscherm of op papier.

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 echter snel.

De ondersteuning voor CSS2 van Internet Explorer is de minste van alle moderne browsers. Eén van de bekendste problemen van Internet Explorer op dit gebied staat bekend als de Internet Explorer box model bug. Volgens de CSS2 specificatie is de aangegeven breedte (width) van een element een maat voor de inhoud van het element (zonder de randen mee te rekenen). Internet Explorer interpreteert de breedte echter als externe breedte (dus met de randen meegerekend)

CSS gebruiken in een HTML pagina

CSS kan als volgt gebruikt worden op een webpagina:

Inline stijldefinitie.

In een HTML-tag neemt u het attribuut style op met daarbinnen een stijdeclaratie. Een dergelijke stijl geldt alleen voor het element waarbinnen deze stijldefinitie is opgenomen.
Voorbeeld:

<div style="border: 1px solid red;">Inhoud</div>

Stijlblok op de huidige webpagina

U kunt een blok met stijldefinities op de pagina zelf plaatsen binnen een <style> HTML-element. De stijlgegevens die u hier plaatst zullen alleen gelden op deze specifieke pagina maar gelden wel voor alle elementen op deze pagina waar ze voor gelden. Het is gebruikelijk dit stijlblok in de <head> sectie van de pagina te plaatsen.
Voorbeeld:

<style type="text/css">
h1: { font-size: 18px; }
h2: { font-size: 14px; }
</style>

Extern stijblad

Stijlen kunt u ook vastleggen in een extern bestand met extensie .css en hierdoor kunt u deze stijl op meerdere pagina's toepassen of zelfs op de gehele website. Op een pagina die deze stijlen moet gebruiken plaatst u dan in de <head> sectie een HTML element met het stijlbestand dat opgenomen moet worden als attribuut.
Voorbeeld:

<link href="stijlblad.css" rel="stylesheet" type="text/css">

De stijldeclaratie

Een stijldeclaratie bestaat uit de CSS-naam van een eigenschap gevolgd door een dubbele-punt en de waarde voor deze css eigenschap.

color: #ffffff;

Stijlregels

In een stijlblok of in een extern stijlbestand gebruikt men stijlregels wat een combinatie is van een selector (hiermee bepalen we waarop we de regel willen toepassen) en daarna tussen accolades één of meerdere stijldeclaraties die gescheiden worden door een puntkomma. Ook kan men commentaar toevoegen door middel van /* commentaar */.

h4 { font-size: 12px; color: red; }  /* Dit is de style voor een h4 element */

Soorten en positionering van elementen

Het box model

Elk element op een webpagina kan in feite worden voorgesteld als een blok (in het Engels een box). De box bevat van buiten naar binnen volgende onderdelen:

Opmerkingen bij het boxmodel

• Voor onder elkaar gepositioneerde blok elementen schuiven de vertikale margins in elkaar.
• Voor inline elementen kan geen width worden ingesteld;
• Blok elementen worden standaard vertikaal onder elkaar geplaatst;
• Inline elementen worden standaard naast elkaar geplaatst en kan er regeloverloop plaatsvinden;

CSS 2.1 selectors

Een css stijlregel begint met een selector die aangeeft op wel element de daaropvolgede stijleigenschappen van toepassing zullen zijn.

Enkelvoudige type selectors

h1 { color: red }

Groeperen van type selectors

U kunt stijldeclaraties ook toepassen voor meerdere elementen tegelijk door deze selectors op te geven gescheiden door een komma.

 H1, H2, H3 { color: red; }

Descendant selectors

Bij een descendant selector wordt de stijldeclaratie alleen toegepast wanneer het element een descendant (opvolger) is van een of meerdere andere elementen. Dit doet u door de descendant te scheiden van de ancestor met behulp van een spatie.

 P I {color: red}

Child selectors

Met child selectors kunt u de descendant selector vernauwen, alleen de children worden opgemaakt.

 P > I {color: red}

Child selectors worden niet ondersteund in IE6.

Adjacent sibling selector

Een adjacent sibling selector gebruikt men om een element op te maken dat onmiddelijk een ander element op hetzelfde niveau (sibling) volgt.

  H1 + H2 {margin-top: -5px}

Adjacent sibling selectors worden niet ondersteund in IE6.

Universele selector

De Universele selector kunt u gebruiken wanneer u wilt verwijzen naar alle elementen hiervoor gebruikt u een asterisk (*). Pas hiermee op, deze selector is erg ruim.

 * {color: brown;}

Attribuut selectors

Bij de invoering van CSS 2 werd het mogelijk stijlen te gebruiken wanneer aan bepaalde voorwaarden voor de element attributen is voldaan. IE6 ondersteunt geen enkele van deze mogelijkheden.

Noot: Wanneer het attribuut een tekenreeks kan bevatten met door spaties gescheiden woorden (zoals alt en title dan kunt u een tilde (~) voor het vergelijkingsteken plaatsen.

Class selectors

Wanneer een element het attribuut class bevat met een of meerdere classnamen dan kunt u deze classnaam genruiken om er een stijl aan te koppelen door gebruik te maken van een class-selector. U defineerd een class selector door een punt (.) voor de naam van de class te zetten.

Id selectors

Wanneer een element het attribuut id (unieke id voor een bepaald element) bevat kunt u aan dit element een stijl koppelen door gebruik te maken van een id-selector. Dit geeft u aan door een hekje (#) voor de naam van de id te zetten. Idnamen kunt u zelf verzinnen en ze zijn in principe hoofdlettergevoelig.

Pseudo-element selectors

Pseudo-element selectors staan u toe opmaak te definiëren voor bijvoorbeeld de eerste letter of de eerste regel van een bepaald element. Voor bijvoorbeeld de eerste letter of regel bestaan er geen specifiek elementen maar kunt u ze toch benaderen vanuit CSS door middel van pseudo-elementen.

Pseudo-class selectors

Een pseudo-class selector maakt het mogelijk stijlen te koppelen aan een element op basis van bijvoorbeeld het aangeklikt zijn van een link of een hover met de muis over een element.

Kleuren in css

Binnen de css specificatie zijn er meerder mogelijkheden om kleuren te specificeren:

De volgende tabel geeft aal kleurnamen weer die gebruikt kunnen worden binnen css, wanneer bij uw browser de Als naam en de Als numeriek niet overeen komen dan herkent de browser deze kleurnaam niet correct.

Maateenheden binnen css

De volgende maateenheden kunnen binnen css gebruikt worden:

CSS 2.1 eigenschappen

Kleur en achtergrond

Font

Tekst

Gegenereerde inhoud, automatische nummering en lijsten

Margin

Padding

Randen

Afmetingen

Regel opmaak

Pagina indeling

Zwevende elementen

Positioneren van elementen

Gebruikers interface

Voorbeelden op het web

Naslagwerken en handleidingen.

• Nederlandstalig Cascading Style Sheets, CSS2 Specificatie