HTML Stylesheets


Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin


Inhoud onderdeel: Introductie stylesheets | Stijlen verbinden met HTML | Inline stijlen | Stijlblok | Extern stijlblad | CLASS en ID | DIV en SPAN | Alternatieve stijlbladen

Gerelateerde elementen: DIV | LINK | META | SPAN | STYLE


Introductie stylesheets

HTML is in 1990 ontwikkeld 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 verschillend gewicht, 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.

Als oplossing voor deze problemen zijn stijlen 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 stijlen. Daarbij is het idee dat stijlen 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.

Stijlen worden gedefinieerd met behulp van speciale talen. De enige taal die door de meest gebruikte actuele browsers ondersteund wordt, is Cascading Style Sheets (CSS). De stijlen die je met CSS kunt definiëren, hebben onder andere betrekking op het lettertype en de lettergrootte, de kleur van de tekst en de achtergrond, de horizontale en verticale uitlijning, het inspringen van tekst, de vormgeving van lijsten en tabellen en de plaats van elementen in het venster van de browser. Een uitgebreide beschrijving van de mogelijkheden is te vinden in het CSS-gedeelte van de Handleiding HTML.

In dit onderdeel komt vooral aan de orde op welke wijze je stijlen met HTML kunt verbinden. Achtereenvolgens komen aan de orde inline stijlen, het stijlblok en het extern stijlblad. Daarna wordt het gebruik van de attributen CLASS en ID en de elementen DIV en SPAN toegelicht. Tenslotte wordt ingegaan op het gebruik van alternatieve stijlbladen.


Vervolg: Stijlen verbinden met HTML



Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Handleiding HTML (http://www.handleidinghtml.nl/)
Copyright © 1995-2016 Hans de Jong
Laatste wijziging: 13 maart 2012