Handleiding HTML - Introductie in CSS

CSS		Introductie in CSS

Handleiding HTML Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin

Inhoud onderdeel: Cascading Style Sheets | CSS in vogelvlucht

CSS in vogelvlucht

Hierna wordt op hoofdlijnen aangegeven hoe je stijlen kunt gebruiken bij de opmaak van HTML-documenten. Eerst wordt aangegeven welke mogelijkheden je hebt om stijlen te verbinden met HTML. Daarna wordt ingegaan op de begrippen stijldeclaratie, stijlregel, cascading en op het erven van stijleigenschappen. Het onderdeel wordt besloten met enkele opmerkingen over grootte en plaats van elementen en het gebruik van CSS bij tabellen.

Stijlen verbinden met HTML

Wanneer je met stijlen wilt werken, dan moet je die op de een of andere manier in verband brengen met je HTML-document. HTML biedt daarvoor drie mogelijkheden: inline stijlen, een stijlblok en een stijlblad.

Een inline stijl gebruik je als een stijl slechts voor een enkel element binnen één HTML-document wilt gebruiken. Je voegt dan aan het element het STYLE attribuut toe en geeft het als waarde één of meer stijldeclaraties:

STYLE="stijldeclaratie"

Wanneer een stijl vaker gebruikt wordt en/of voor meer elementen, maar slechts binnen één document, dan kun je het beste een stijlblok in de head van het document plaatsen. Dat doe je door het STYLE element op te nemen en daarbinnen één of meer stijlregels te plaatsen.

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

Wanneer een stijl in meerdere documenten gebruikt moet worden, dan is het verstandig deze in een apart document te plaatsen: een extern stijlblad. In de head van een HTML-document kun je het LINK element opnemen om aan te geven in welk stijlblad de stijlen staan.

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

Het stijlblad zelf bevat geen HTML-code, maar alleen één of meer stijlregels.

stijlregel

Een uitgebreide beschrijving van de mogelijkheden om stijlen te koppelen aan HTML is te vinden in het onderdeel Stylesheets in het HTML gedeelte van deze handleiding.

Stijldeclaratie

Een stijldeclaratie bestaat uit een eigenschap en een waarde voor die eigenschap:

eigenschap: waarde;

Voor de color eigenschap, waarmee de voorgrondkleur van de tekst van een element wordt vastgelegd, ziet een stijldeclaratie er bijvoorbeeld als volgt uit:

color: red;

Wanneer je deze stijldeclaratie met behulp van een inline stijl voor een P element wilt gebruiken, dan neem je de volgende HTML-code in het document op:

<P STYLE="color: red;">De voorgrondkleur van dit P element is rood.</P>

De voorgrondkleur van dit P element is rood.

Je kunt meerdere stijldeclaraties tegelijk opnemen. Je plaatst ze dan na elkaar en gebruikt als scheiding een punt-komma. Bijvoorbeeld:

color: yellow; background-color: red;

Deze handleiding bevat een beschrijving van een groot aantal eigenschappen en de beschikbare waarden, met veel voorbeelden en informatie over de ondersteuning door browsers. Een overzicht van de verschillende eigenschappen wordt gegeven in het onderdeel Eigenschappen. Algemene informatie over de ondersteuning door browsers is te vinden in het onderdeel CSS en browsers.

Stijlregel

In een stijlblok in de head van een document en in een extern stijlblad worden de stijlen vastgelegd met stijlregels. Een stijlregel bestaat uit twee delen: een selector en een blok met één of meer stijldeclaraties, dat wordt begrensd door accolades (gekrulde haken):

selector { stijldeclaratie }

De selector selecteert de elementen waarvoor de gedeclareerde stijl geldt. Er zijn verschillende soorten selectors, bijvoorbeeld element-selectors, attribuut-selectors en CLASS- en ID-selectors. Ze worden beschreven in het onderdeel Selectors.

Een stijlregel waarbij het H3 element de element-selector is, ziet er bijvoorbeeld als volgt uit:

H3 { font-family: sans-serif; font-size: 16px; }

Een stijlregel waarbij een CLASS-selector is gebruikt, is bijvoorbeeld:

.speciaal { color: #FF0000; background-color: #FFFFFF; }

Je kunt deze selector aan één of meer HTML-elementen koppelen via het CLASS attribuut. Bijvoorbeeld:

<H3 CLASS="speciaal">De tekst van deze H3 is rood</H3> <P CLASS="speciaal">De tekst van deze P is ook rood</P>

Een stijlregel waarbij een ID-selector is gebruikt, is bijvoorbeeld:

#ab03x { color: #FF0000; background-color: #FFFFFF; }

Je kunt deze selector binnen hetzelfde HTML-document aan slechts één HTML-element koppelen via het ID attribuut. Bijvoorbeeld:

<H3 ID="ab03x">De tekst van deze H3 is rood</H3>

In een stijlblok of stijlblad kunnen naast gewone stijlregels ook enkele speciale regels opgenomen worden: de zogenoemde @-regels. Een veel gebruikte @-regel is de @import-regel, die gebruikt kan worden om een stijlblad te importeren in een stijlblok of in een ander stijlblad. Een andere @-regel is de @media-regel, waarmee het mogelijk is binnen één stijlblok of stijlblad stijlregels op te nemen, die betrekking hebben op de weergave door verschillende soorten apparaten.

Soms is het handig aan een stijlregel een beschrijving toe te voegen, zodat je later nog weet waarvoor de stijl gebruikt wordt. Je kunt dat doen door in het stijlblok of stijlblad commentaar op te nemen. Dit commentaar is uiteraard niet zichtbaar in de browser.
De opbouw is:

/* commentaar */

Bijvoorbeeld:

.code { font-family: Courier, monospace; } /* voor HTML-code */

Cascading

Bij CSS kun je op verschillende manieren de stijl voor een element vastleggen: via een inline stijl, via een ingesloten stijlblokken en via externe stijlbladen. Je kunt deze mogelijkheden ook tegelijkertijd gebruiken en daarbij voor één element verschillende stijlen definiëren. Omdat deze verschillende stijlen kunnen conflicteren moet er een mechanisme zijn dat bepaalt, welke stijl uiteindelijk wordt aangehouden. Bij CSS heet dat mechanisme "cascading".

Een belangrijke regel bij cascading is dat meer specifieke selectors prioriteit hebben boven minder specifieke selectors. De volgorde van afnemende specificiteit is daarbij: een stijl die is vastgelegd via een inline stijl, een stijl die is vastgelegd via een ID-selector, een stijl vastgelegd via een CLASS-selector en tenslotte een stijl die via vastgelegd voor een element-selector. Wanneer twee of meer selectors dezelfde specificiteit hebben, dan wordt de stijl aangehouden, die in de verschillende stijlblokken of stijlbladen als laatste is gedefinieerd is.

Het erven van stijleigenschappen

Bij het gebruik van stijlen moet je er rekening mee houden, dat bij een groot aantal eigenschappen de stijl van een parent element geërfd wordt door descendent elementen (ingesloten elementen van een lager niveau). Als bijvoorbeeld voor het BODY element via een stijlregel een kleur voor de tekst gedefinieerd wordt, dan geldt deze ook voor elementen als P, PRE, Hx en UL.
Wanneer je niet wilt dat voor bepaalde elementen de stijl van het parent element geërfd wordt, dan moet je voor die elementen een nieuwe stijl definiëren. Deze laatste stijl zal gelden, omdat deze meer specifiek is.

In de volgende voorbeelden, waarin gebruik gemaakt wordt van een inline stijl, is het principe van het erven van eigenschappen te zien.

<P STYLE="color: red;">Hier erft <B>vet</B> de kleur van de paragraaf.</P>

Dit wordt als volgt weergegeven:

Hier erft vet de kleur van de paragraaf.

Wordt ook voor vet een kleur gedefinieerd:

<P STYLE="color: red;">Hier gaat de stijl van <B STYLE="color: green;">vet</B> boven de stijl van de paragraaf.</P>

dan zie je:

Hier gaat de stijl van vet boven de stijl van de paragraaf.

Bij de beschrijving van de verschillende eigenschappen wordt aangegeven of een stijl al dan niet geërfd wordt door descendent elementen.

Van erven is overigens alleen sprake, als er geen stijlregels zijn die voor het element zelf gelden.

Grootte en plaats elementen

CSS kent niet alleen eigenschappen waarmee je zaken als kleur en lettertype van de tekst kunt bepalen, maar ook eigenschappen waarmee je de grootte en de plaats van elementen kunt wijzigen. Zo zijn er eigenschappen waarmee je de afmetingen van elementen en de ruimte eromheen vastlegt. Ook zijn er eigenschappen waarmee je een element zwevend kunt maken, of het op een bepaalde plek kunt positioneren. In het onderdeel CSS en elementen wordt beschreven op welke wijze elementen normaal worden vormgegeven en hun plaats krijgen bij de presentatie en hoe je daar met behulp van de verschillende eigenschappen invloed op kunt uitoefenen.

CSS en tabellen

Met CSS heb je veel meer mogelijkheden bij de presentatie van tabellen dan met alleen HTML. Je kunt bijvoorbeeld de breedte, kleur en stijl van elke rand afzonderlijk bepalen, kiezen voor samenvallende in plaats van gescheiden randen, een achtergrondkleur of -afbeelding definiëren, kolommen en/of rijen verbergen en een vaste breedte voor de tabel vastleggen. Een uitgebreide toelichting wordt gegeven in het onderdeel CSS en tabellen.

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