Handleiding HTML - Style sheets

Style sheets
Handleiding HTML	Inhoud Index

In dit onderdeel komen aan de orde Introductie, Style sheets verbinden met HTML, Elementen, Inline stijlen, Stijlblok, Extern stijlblad, CLASS en ID, DIV en SPAN, Cascading en Alternatieve stijlbladen.

Introductie

HTML is in 1990 ontwikkeld is om hypertext documenten te maken, welke op verschillende platforms toegankelijk zijn. Het doel was het op een goede manier ontsluiten van informatie. Bij de weergave van de documenten ging het niet om het bieden van een mooie, door de auteur geheel vastgelegde lay-out. Wel zouden de verschillende elementen waaruit HTML is opgebouwd, structuur aan een document moeten geven. Bijvoorbeeld door vast te leggen dat het bij blokken tekst gaat om koppen van verschillende zwaarte, om paragrafen, geciteerde tekst en adresgegevens. Of door (met de elementen voor logische tekstopmaak) te bepalen dat tekst met nadruk wordt weergeven (cursief of vet), of als computercode.

In de wetenschappelijke wereld, waarin HTML in eerste instantie vooral werd gebruikt, voldeed de genoemde wijze van presenteren uitstekend. Met de toegenomen verbreding in het gebruik van Internet ontstond bij webauteurs echter de behoefte aan meer mogelijkheden bij de opmaak van documenten. Op deze behoefte is door de ontwikkelaars van browsers (vooral Netscape en Microsoft) ingespeeld door het introduceren van nieuwe elementen en attributen. Bijvoorbeeld de later in HTML opgenomen elementen CENTER en FONT en attributen als SIZE, COLOR, BGCOLOR, FACE en ALIGN, maar ook de browser-specifieke elementen als BLINK, MULTICOL, SPACER en MARQUEE.
Webauteurs zelf gebruikten hun creativiteit om met bestaande HTML-elementen meer invloed op de opmaak van hun documenten te krijgen. Voorbeelden zijn:

het gebruik van het BLOCKQUOTE element om tekst te laten inspringen
het opnemen van transparante "gifjes" om de witruimte te controleren
het gebruik van afbeeldingen om tekst op een bepaalde manier weer te geven (in een specifiek lettertype, of in een grootte welke met HTML niet bereikt kan worden)
het toepassen van tabellen om tekst en andere inhoud van een document in een vaste lay-out te krijgen (zoals ingesprongen of in kolommen).

De verstrengeling van structuur en presentatie kent niet alleen voordelen. Zeker de browser-specifieke elementen en attributen, maar ook het gebruik van de andere mogelijkheden voor de presentatie hebben vaak tot de gevolg dat een document niet meer in elke browser en op elk platform goed te bekijken is. Daarnaast heeft het (oneigenlijke) gebruik van afbeeldingen geleid tot een aanzienlijke toename in het dataverkeer.

Als oplossing voor deze problemen zijn style sheets geïntroduceerd. De achterliggende gedachte is de scheiding tussen structuur en presentatie: HTML moet zoals oorspronkelijk bedoeld weer zorgen voor de structuur van het document, de presentatie wordt bepaald met behulp van style sheets. Daarbij is het idee dat style sheets niet alleen gebruikt worden als vervanging van huidige opmaakmogelijkheden, maar veel meer gaan bieden. Dat moet dan bovendien op een flexibele en makkelijk beheersbare manier.

Style sheets verbinden met HTML

Een style sheet is een verzameling stijlregels, die bepalen hoe elementen in een document door de browser (of andere apparaten, zoals de printer) weergegeven moeten worden. De stijlregels kunnen bijvoorbeeld betrekking hebben op het lettertype, de lettergrootte, de kleur van de tekst, de achtergrondkleur en de uitlijning, maar ook op het inspringen en de plaats in het browservenster.

Style sheets kunnen op verschillende manieren aan de elementen in een HTML-document gekoppeld worden:

wanneer een stijl slechts een enkele keer gebruikt wordt in een document, dan kan door het toevoegen van het STYLE attribuut aan een element, een inline stijl vastgelegd worden
wanneer een stijl vaker gebruikt wordt en/of voor meer elementen, maar wel binnen één document, dan kunnen de stijlregels met het STYLE element in een ingesloten stijlblok in de head van het document geplaatst worden. Dit maakt het voor de auteur een stuk eenvoudiger wijzigingen aan te brengen in een eenmaal vastgelegde stijl, of nieuwe stijlen te definiëren. In plaats van elke keer dat een element in een document gebruikt wordt een inline stijl te moeten wijzigen of toevoegen, hoeft de aanpassing slechts één keer in het stijlblok te worden aangebracht
wanneer in meerdere documenten voor één of meer elementen dezelfde stijlregels toegepast moeten worden, dan kunnen deze het beste in een apart document worden opgenomen: een extern stijlblad. In de HTML-documenten volstaat met behulp van het LINK element een eenvoudige verwijzing naar het stijlblad. Wanneer de auteur iets aan een gebruikte stijl wil wijzigen, hoeft de wijziging niet in elk document afzonderlijk, maar slechts op één plaats in het stijlblad te worden aangebracht.

In een stijlblok of stijlblad kunnen naast stijlregels voor bepaalde elementen ook stijlregels opgenomen worden, welke alleen in specifieke situaties toegepast moeten worden. Het koppelen van zo'n stijlregel aan een element vindt plaats via de attributen CLASS en ID van dat element.

Niet altijd hebben stijlregels betrekking op een element. Soms heeft een stijl betrekking op een groter deel van een document, soms juist op een kleiner deel. In dat geval kan gebruik gemaakt worden van respectievelijk de elementen DIV en SPAN.

De stijlregels worden gedefinieerd met behulp van een speciale taal. De enige style sheet taal, welke in meer of mindere mate door de laatste versies van de meest gebruikte browsers ondersteund wordt, is Cascading Style Sheets (CSS). Het is echter goed mogelijk dat in de toekomst, bijvoorbeeld voor specifieke toepassingen, ook andere talen ontwikkeld worden.
In de voorbeelden in dit onderdeel wordt gebruik gemaakt van CSS.

Elementen

Voor het verbinden van style sheets met HTML kunnen onder meer de volgende elementen gebruikt worden:

DIV
LINK

META
SPAN

STYLE

De elementen en bijbehorende attributen worden beschreven in aparte documenten. Voor elk element en attribuut is aangegeven of het deel uitmaakt van een HTML-specificatie en zo ja welke. Bovendien is aangegeven en of het element of attribuut ondersteund wordt door en zo ja vanaf welke versie van Netscape Navigator, Microsoft Internet Explorer en Opera.

Inline stijlen

Wanneer een stijl slechts een enkele keer in een document wordt toegepast, kun je gebruik maken van een inline stijl. Je doet dat door het STYLE attribuut toe te voegen aan het element, waarvan je de opmaak van de ingesloten inhoud wilt bepalen. Als waarde van het STYLE attribuut neem je de stijldeclaratie op, waarin de gewenste stijl is vastgelegd:

<Element STYLE="stijldeclaratie">

In het volgende voorbeeld wordt met een inline stijl vastgelegd, dat de tekst ingesloten door het betreffende H1 element in rood moet worden weergegeven.

<H1 STYLE="color: red"> </H1>

Wanneer in een document gebruik gemaakt wordt van inline stijlen, dan moet aangegeven worden welke style sheet taal gebruikt wordt. Dat doe je door het META element in de head van het document te plaatsen met de attributen HTTP-EQUIV en CONTENT. Voor Cascading Style Sheets neem de volgende code op:

<META HTTP-EQUIV="content-style-type" CONTENT="text/css">

Stijlblok

Stijlen welke slechts op één document betrekking hebben, kunnen worden opgenomen in een stijlblok, dat geplaatst wordt in de head van dat document. Hiervoor wordt gebruik gemaakt van het STYLE element. Aan het STYLE element wordt minimaal het TYPE attribuut toegevoegd, dat het Internet Media (MIME) type definieert van het bestand waarnaar verwezen wordt. Voor Cascading Style Sheets is dat "text/css".
Het STYLE element mag een onbeperkt aantal malen opgenomen worden in een document.

Een stijlblok heeft de volgende opbouw:

<HEAD> <STYLE TYPE="text/css"> stijlregels </STYLE> ... </HEAD>

De stijlregels in het stijlblok zijn bij Cascading Style Sheets opgebouwd volgens het selector-mechanisme, dat beschreven wordt in het onderdeel Structuur CSS. De selector bepaalt op welk deel van een document de stijl betrekking heeft. Dat kan een element zijn (we spreken dan over een element selector), maar bijvoorbeeld ook een specifiek voorkomen van een element. In het laatste geval vindt de koppeling van de stijl aan een element plaats via de attributen CLASS of ID en een class-naam of een id-waarde (we spreken dan over een attribuut selector).

Een browser die het STYLE element niet kent, zou de inhoud moeten negeren. Zeker bij oudere browsers is dat niet het geval en bestaat de kans dat de stijlregels als normale tekst worden weergegeven. Om dat te voorkomen, kunnen bij Cascading Style Sheets de stijlregels binnen de code voor commentaar geplaatst worden.

Een stijlblok heeft bijvoorbeeld de volgende opbouw:

<STYLE TYPE="text/css">  </STYLE>

Aan het STYLE element kan het MEDIA attribuut worden toegevoegd, om aan te geven dat de stijlregels betrekking hebben op de weergave van het document door een bepaald apparaat. Als waarden (media descriptors) kent het MEDIA attribuut onder meer "screen" (voor de weergave zonder pagina-indeling op een computerscherm), "print" (voor de weergave in in pagina-opmaak bij het afdrukken of als print-preview) en "aural" (voor de weergave door een spraak-synthesizer). Bij de waarde "all" worden de stijlregels toegepast bij de weergave door alle apparaten. De standaardwaarde, waarvan uitgegaan wordt als het MEDIA attribuut niet is gebruikt, is "screen".

In het volgende voorbeeld zijn in de head van een document twee stijlblokken gedefinieerd. Het eerste stijlblok moet alleen toegepast worden bij het afdrukken van het document, voor het tweede is het MEDIA attribuut niet opgenomen en dat moet dus gebruikt worden bij de weergave op het scherm.

<STYLE TYPE="text/css" MEDIA="print">  </STYLE> <STYLE TYPE="text/css">  </STYLE>

Bekijk in een nieuw venster of de browser het MEDIA attribuut ondersteunt.

Wanneer een stijlblok op meerdere apparaten betrekking heeft, dan worden meerdere waarden voor het MEDIA attribuut opgenomen, gescheiden door een komma.

<STYLE TYPE="text/css" MEDIA="screen, print">  </STYLE>

Door Netscape Navigator 4 wordt uitsluitend de waarde "screen" ondersteund. Wanneer de waarde "screen" gebruikt wordt in combinatie met een andere waarde, worden de in het stijlblok opgenomen stijlen door Netscape Navigator 4 genegeerd.

In Cascading Style Sheets kunnen met behulp van de @import regel één of meer externe stijlbladen in een stijlblok geïmporteerd worden.
De opbouw is:

<STYLE TYPE="text/css">  </STYLE>

De bestemming wordt op dezelfde wijze vastgelegd als bij het HREF attribuut van het LINK element.
Naast de geïmporteerde stijlbladen kunnen in het stijlblok ook op de gebruikelijke manier stijlregels worden opgenomen, mits deze geplaatst worden na de @import regel. Bijvoorbeeld:

<STYLE TYPE="text/css">  </STYLE>

Gewone stijlregels hebben prioriteit boven de stijlregels uit een geïmporteerde stijlblad. Indien meerdere stijlbladen geïmporteerd worden en in meerdere van deze stijlbladen de stijl voor een element gedefinieerd wordt, dan wordt de stijlregel uit het laatste geïmporteerde stijlblad aangehouden.

Extern stijlblad

Een extern stijlblad is een document, waarin stijlen zijn beschreven waarvan in één of meer andere documenten gebruik gemaakt kan worden. De verwijzing vanuit een document naar een stijlblad gebeurt met behulp van het LINK element, dat wordt opgenomen in de head van het document. Aan het LINK element worden in ieder geval de attributen HREF, REL en TYPE toegevoegd. Het HREF attribuut specificeert welk stijlblad geopend moet worden, met het REL attribuut wordt aangegeven, dat het bij het gerelateerde bestand gaat om een stylesheet. Het TYPE attribuut definieert het Internet Media (MIME) type van het bestand waarnaar verwezen wordt. Voor Cascading Style Sheets is dat "text/css".
Het LINK element mag een onbeperkt aantal malen opgenomen worden in een document.

Een extern stijlblad wordt bijvoorbeeld als volgt opgeroepen:

<HEAD> <LINK HREF="hdl-html.css" REL="stylesheet" TYPE="text/css"> ... </HEAD>

Een stijlblad bevat geen HTML-code, maar uitsluitend stijlregels. Bij Cascading Style Sheets zijn deze stijlregels opgebouwd volgens het selector-mechanisme, dat beschreven wordt in het onderdeel Structuur CSS. De selector bepaalt op welk deel van een document de stijl betrekking heeft. Dat kan een element zijn (we spreken dan over een element selector), maar bijvoorbeeld ook een specifiek voorkomen van een element. In het laatste geval vindt de koppeling van de stijl aan een element plaats via de attributen CLASS of ID en een class-naam of een id-waarde (we spreken dan over een attribuut selector).
Bij Cascading Style Sheets heeft de naam van het stijlblad de extensie "css".

Een stijlblad kan er bijvoorbeeld als volgt uitzien:

BODY { font-family: Arial, Helvetica, sans-serif; font-size: 10pt } .code { font-family: "Courier New", Courier, monospace; font-size: 13pt }

Het MEDIA attribuut kan aan het LINK element toegevoegd worden, om aan te geven dat de stijlregels betrekking hebben op de weergave van het document door een bepaald apparaat. Als waarden (media descriptors) kent het MEDIA attribuut onder meer "screen" (voor de weergave zonder pagina-indeling op een computerscherm), "print" (voor de weergave in pagina-opmaak bij het afdrukken of als print-preview) en "aural" (voor de weergave door een spraak-synthesizer). Bij de waarde "all" worden de stijlregels toegepast bij de weergave door alle apparaten. De standaardwaarde, waarvan uitgegaan wordt als het MEDIA attribuut niet is gebruikt, is "screen".

In het volgende voorbeeld worden de stijlregels in het stijlblad alleen toegepast bij het afdrukken:

<LINK HREF="hdl-html.css" REL="stylesheet" TYPE="text/css" MEDIA="print">

Wanneer een stijlblad op meerdere apparaten betrekking heeft, dan worden meerdere waarden voor het MEDIA attribuut opgenomen, gescheiden door een komma.

<LINK HREF="hdl-html.css" REL="stylesheet" TYPE="text/css" MEDIA="screen, print">

Door Netscape Navigator 4 wordt uitsluitend de waarde "screen" ondersteund. Wanneer de waarde "screen" gebruikt wordt in combinatie met een andere waarde, worden de in het stijlblad opgenomen stijlen door Netscape Navigator 4 genegeerd.

CLASS en ID

Met behulp van de attributen CLASS en ID kunnen aan bijna elk element in een document stijlen worden toegevoegd, welke met behulp van een attribuut selector zijn opgenomen in een extern stijlblad of een ingesloten stijlblok.

Het CLASS attribuut wordt toegepast, wanneer een element niet elke keer in dezelfde stijl moet worden uitgevoerd (en dus geen stijl voor het element gedefinieerd kan worden), of als dezelfde stijl voor verschillende elementen gebruikt moet kunnen worden. Het ID attribuut kan alleen toegepast worden indien de waarde ervan slechts één keer in een document wordt gebruikt.

Het verbinden van de stijl met een element gebeurt bij gebruik van van het CLASS attribuut via een class-naam en in het geval van het ID attribuut via een id-waarde:

<Element CLASS="class-naam">

<Element ID="id-waarde">

De stijlregels in een stijlblad of een stijlblok voor de class-naam en de id-waarde hebben de volgende opbouw:

.class-naam { stijldeclaratie }

#id-waarde { stijldeclaratie }

In het volgende voorbeeld zijn in een stijlblok de class-naam "rood" en de id-waarde xYz987 opgenomen:

<STYLE TYPE="text/css">  </STYLE>

Van elk element, waaraan het CLASS attribuut met de class-naam "rood" is toegevoegd, is de kleur van de tekst rood:

<H1 CLASS="rood"> </H1> of <B CLASS="rood"> </B>

Van het enkele voorkomen van het element, waaraan het ID attribuut met de id-waarde "abC01" is toegevoegd, is de kleur van de tekst blauw:

<P ID="xYz987"> </P>

Zie voor meer informatie over de opbouw van de attribuut selectors het onderdeel Structuur CSS.

DIV en SPAN

De elementen DIV en SPAN kunnen gebruikt worden, wanneer een stijl voor een deel van een document moet worden vastgelegd en dat deel niet tevens door een ander element ingesloten wordt.
Het DIV element is een element op blokniveau, dat weer andere elementen op blokniveau mag bevatten. Het wordt vaak gebruikt om een stijl voor een groter deel van een document vast te leggen.
Het SPAN element mag alleen inline inhoud en inline elementen bevatten en zal daardoor in het algemeen betrekking hebben op een beperkt deel van een document.
Voor het toevoegen van de stijl aan het DIV of het SPAN element kan gebruik gemaakt worden van de attributen STYLE, CLASS en ID.

In het volgende voorbeeld wordt voor het DIV element een inline stijl gedefinieerd met behulp van het STYLE attribuut.

<DIV STYLE="color: red"> <H2>Dit is H2</H2> <P>Deze tekst is ingesloten door het P element.</P> </DIV>

In de browser zie je:

Dit is H2

Deze tekst is ingesloten door het P element.

Voor een deel van de door het P element ingesloten tekst wordt nu een inline stijl gedefinieerd door het STYLE attribuut toe te voegen aan het SPAN element.

<DIV STYLE="color: red"> <H2>Dit is H2</H2> <P>Deze <SPAN STYLE="color: blue">tekst</SPAN> is ingesloten door het P element.</P> </DIV>

In de browser zie je:

Dit is H2

Deze tekst is ingesloten door het P element.

Cascading

Sommige style sheet talen, zoals Cascading Style Sheets, bieden de mogelijkheid stijlinformatie uit verschillende bronnen (inline stijlen, ingesloten stijlblokken en externe stijlbladen) te combineren. Het mechanisme dat bepaalt welke stijlregels voorrang krijgen bij het combineren, heet "cascading". In het algemeen is de volgorde waarin LINK en STYLE elementen in de head van een document staan, bepalend: een later style sheet heeft een hogere prioriteit dan een eerder style sheet. Daarnaast is bij Cascading Style Sheets de specificiteit belangrijk: hoe meer specifiek een stijlregel is, hoe meer prioriteit deze heeft.

Alternatieve stijlbladen

In de eerder gegeven voorbeelden voor het koppelen van externe stijlbladen aan een document is het TITLE element niet aan het LINK element toegevoegd:

<LINK HREF="basis.css" REL="stylesheet" TYPE="text/css">

Naast of in plaats van deze "vaste" stijlbladen (welke in alle gevallen door de browser gebruikt moeten worden) biedt HTML 4.0 de mogelijkheid alternatieve stijlbladen te specificeren. Bijvoorbeeld een stijlblad voor normaal gebruik en een stijlblad met grotere letters voor mensen met een verminderd gezichtsvermogen. Deze alternatieven zouden door de browser aan de gebruiker gepresenteerd moeten worden, waarna deze een keuze kan maken.

Een alternatief stijlblad wordt gedefinieerd door voor het REL attribuut van het LINK element de waarde "alternate stylesheet" op te nemen. Het TITLE element wordt gebruikt om een alternatief stijlblad een naam te geven. Deze naam kan de browser gebruiken bij de presentatie van de alternatieven.

<LINK HREF="standaard.css" REL="alternate stylesheet" TYPE="text/css" TITLE="Standaard weergave"> <LINK HREF="groot.css" REL="alternate stylesheet" TYPE="text/css" TITLE="Grote letters">

Een alternatief kan uit meerdere stijlbladen bestaan. Via het TITLE attribuut krijgen deze stijlbladen dezelfde naam. Als het alternatief gekozen wordt, moet de browser alle erbij behorende stijlbladen gelijktijdig gebruiken.

Door voor één van de alternatieven als waarde voor het REL attribuut niet "alternate stylesheet" maar gewoon "stylesheet" op te nemen, wordt dat alternatief als voorkeur aangewezen. Deze voorkeur wordt aangehouden indien de gebruiker geen keuze maakt uit de verschillende alternatieven. Het TITLE attribuut moet in dit geval wel gebruikt worden, omdat het stijlblad anders niet als alternatief, maar als "vast" stijlblad gezien wordt.

<LINK HREF="standaard.css" REL="stylesheet" TYPE="text/css" TITLE="Standaard weergave">

Ook het META element kan gebruikt worden om aan te geven dat een stijlblad de voorkeur heeft. Als waarde voor het CONTENT attribuut wordt dan de naam van het stijlblad opgenomen:

<META HTTP-EQUIV="default-style" CONTENT="standaard.css">

Wanneer zowel het LINK element als met het META element gebruikt zijn om een stijlblad als voorkeur te definiëren, dan gaat die via het META element voor. Indien meerdere stijlbladen als voorkeur gedefinieerd worden met het META element, dan wordt het stijlblad gebruikt, dat als laatste is opgenomen. Indien twee of meer LINK elementen stijlbladen met voorkeur definiëren, dan heeft het stijlblad dat als eerste is opgenomen voorrang.

De verschillende soorten stijlbladen mogen ook gelijktijdig gebruikt worden:

<LINK HREF="basis.css" REL="stylesheet" TYPE="text/css"> <LINK HREF="standaard.css" REL="stylesheet" TYPE="text/css" TITLE="Standaard weergave"> <LINK HREF="groot.css" REL="alternate stylesheet" TYPE="text/css" TITLE="Grote letters">

In bovenstaand voorbeeld wordt het stijlblad "basis.css" altijd gebruikt. Afhankelijk van de keuze van de gebruiker wordt "basis.css" gecombineerd met "standaard.css" of "groot.css". Indien de gebruiker geen keuze maakt, wordt "basis.css" in combinatie met het stijlblad met voorkeur "standaard.css" gebruikt.

Het gebruik van alternatieve stijlbladen wordt op dit moment niet ondersteund door de verschillende browsers.

Inhoud Handleiding HTML Index Inhoud Style Sheets