Websites met stijl

Naslag: Stijlregels, inleiding

Op dit stijlblad

Vorm

De algemene vorm van een stijlregel is: selector, selector, selector { declaratie; declaratie; declaratie;}

Voorbeeld:p, nav {color: blue;} De tekstkleur van de elementen p (alinea's) en nav (menu) is blauw.
Meer over selectors in de naslag: selectors.

Plaats

Stijlregels kunnen op 3 plaatsen worden neergezet:

  1. In een stijlblad, een apart document.
  2. In een stijblok in de head van een html-document
  3. Als Inline-stijl in de begin-tag van het element waarop de stijlregel betrekking heeft.

1. In een apart stijlblad

De stijlregels staan in een apart bestand, het stijlblad. In de head van elk html-document dat van die stijlen gebruik maakt staat de volgende link: <link rel="stylesheet" href="stijlblad.css">. Op de plaats van stijlblad.css staan pad naar en naam van het stijlblad.

Een stijlblad kan op deze manier aan elk willekeurig html-document worden gelinkt. Het is geschikt om een hele website vorm te geven.

Opmerking

Er kunnen verschillende stijlbladen aan één html-docuent worden gelinkt. Zie het voorbeeld: <head>
....
<link rel="stylesheet" href="stijlblad1.css">
<link rel="stylesheet" href="stijlblad2.css">
....
</head>;

2. In een stijlblok

Een stijlblok staat in de head van een html-document. Het bestaat uit de tags <style> en </style> met daartussen de stijlregels: <head>
....
<style>
Hier komen de stijlregels
</style>
.....
</head>;

Let op: als een html-document gebruik maakt van een stijlblok en een stijlblad, moet het stijlblok ná de link naar het stijlblad staan:

FOUT
<style>
...
</style>
<link rel="stylesheet" href="stijlblad.css">

GOED
<link rel="stylesheet" href="stijlblad.css">
<style>
...
</style>

De stijlen in het stijlblok hebben betrekking op het html-document waar ze in staan. Het stijlblok wordt dus gebruikt voor stijlregels die maar in één document gebruikt worden.

3. Inline-stijl

Een inline-stijl heeft betrekking op één element in één html-document. Het wordt geplaatst in de begin-tag van het element waarop de stijl betrekking heeft.

De vorm is: style="...". Op de plaats van de puntjes komen de stijlregels. In het voorbeeld wordt een alinea voorzien van rode letters: <p style="color: red">...</p>

Stijlblad, stijlblok en inline-stijl mixen

Stijlblad, stijlblok en inline-stijlen kunnen worden gemixt. Houd daarbij de volgende richtlijnen:

  1. Zet alle stijlen die je in meer dan één html-document gebruikt in een stijlblad
  2. Zet stijlen die alleen maar in één html-document voorkomen (en waarvan je verwacht dat ze niet later ook in een ander document gebruikt gaan worden) in een stijlblok in dat document.
  3. Gebruik inline-stijlen in een element met een afwijkende vormgeving, als die vormgeving maar één keer voorkomt.

Prioriteit van stijlregels

  1. De algemene regel is dat specifieke stijlregels prioriteit hebben boven algemenere stijlregels.
  2. Van hoge naar lage prioriteit is de volgorde: inline stijlen, stijlen voor een id, stijlen voor een class, stijlen voor een element.
  3. Bij stijlregels van dezelfde prioriteit geldt de laatstgenoemde stijlregel.
Toelichting
  1. Bij het starten van de browser worden als eerste de standaard stijlen geladen, die vast zijn ingebouwd in de browser (bv. letterkleur: zwart). Omdat deze stijlen als eerste geladen worden hebben ze de laagste prioriteit.
  2. Als een webpagina in de browser wordt geopend wordt de code van boven naar beneden uitgevoerd. Eerst wordt een eventueel stijlblad geladen. Alle stijlen daaruit overschrijven de standaard stijlen.
  3. Dan wordt een eventueel stijlblok (<style>...</style>) geladen. De stijlen daarvan overschrijven de overeenkomstige eerder geladen stijlen.
  4. Tenslotte worden in de body eventuele inline-stijlen geladen. Die overschrijven overeenkomstige stijlen uit stijlblok, stijlblad en standaard stijlen.

Die volgorde is ook logisch: de standaard (vast ingebouwde) stijlen hebben de laagste prioriteit, want die moeten vervangen kunnen worden door de ontwerper van een website.
De stijlen van het stijlblad gelden in principe voor alle webpagina's.
Stijlen daaruit moeten in één bepaalde webpagina aangepast kunnen worden: daarom heeft een stijlblok een hogere prioriteit dan een stijlblad.
En inline stijlen passen de opmaak van één specifiek element aan. Die hebben de hoogste prioriteit.

Let op:

Als je in een html-document een stijlblad én een stijlblok gebruikt, moet de link naar het stijlblad vóór het stijlblad staan. Als je dat niet doet wordt het stijlblad geladen na het stijlblok. Dan heeft het (algemenere) stijlblad prioritiet boven het stijlblok - en dat is niet de bedoeling.

Voorbeelden

voorbeeld 1 p {color: green;}
.extra {color: blue;}
#eerst {color: red;}

Met deze stijlregels zijn:

voorbeeld 2 p {color: red;}
p {color: blue;}
In dit triviale voorbeeld is de tekst van alinea's blauw, niet rood.

voorbeeld 3 - html <!DOCTYPE html>

<html>
<head>
<title>Proefje</title>
<link rel="stylesheet" href="proefje.css">
<style>
p {color: blue;}
</style>
</head>

<body>
<p>alinea 1</p>
<p>alinea 2</p>
<p class="extra">alinea extra</p>
</body>
</html>

voorbeeld 3 - stijlblad p {color: red;}
p.extra {color: red;}

Ook hier worden de teksten van de alinea's blauw. Want bij gelijke prioriteit geldt de laatstgenoemde (het stijlblok). Alleen de teksten van de alinea's van de class 'extra' worden rood, want class gaat boven element:

Voorbeeld 3 - resultaat

alinea 1

alinea 2

alinea extra