Inline stijlen en externe stijlbladen

Inline stijlen

In de vorige oefeningen hebben we gewerkt met inline stijlen: de layoutinstructies worden op deze manier telkens in het document zelf opgenomen.

Bekijk eens uw pagina index.html in Bronweergave en ga op zoek naar de code van de link ’Contact’:

U ziet dat het <li>-element (lijstitem) een onderrand (border-bottom) van 1 pixel heeft meegekregen en dat het opsommingsteken (list-style-type) is weggehaald. De link (het <a>-element ) heeft het lettertype Arial gekregen en de onderstreping van de link is verwijderd.

Extern stijlblad

Door de stijlinstructies te verzamelen in een afzonderlijk bestand en er vanuit uw webpagina een link naar te leggen bespaart u heel wat werk. U hoeft immers maar één keer de gewenste stijl aan te maken om die op alle pagina’s van uw website toe te passen.

Dat gaat zo:

 Ga eerst naar Windows verkenner en maak binnen de map waar u uw webpagina’s hebt opgeslagen een submap ’img’ aan
 Keer terug naar Kompozer; klik op de knop ’CaScadeS’ in het menu bovenaan en daarna op het tabblad ’Algemeen’
 Klik op de knop ’Stijlblad aanmaken en ernaar overschakelen’
 Sla uw nieuwe stijlblad op in de map ’img’ en geef het de naam ’stijl.css’.

Stijldefinities overbrengen

Maak nu de stijlen die u toegekend hebt aan de links (onderstreping weg, lettertype veranderen) en de lijst-items (onderrand toevoegen en opsommingsteken verwijderen) in uw menu opnieuw aan:

 Kies ’Regel’ uit het menu links bovenaan het CaScadeS venster

 We gaan eerst de links aanpassen; vul dus onderaan de tag ’a’ in en klik ’Stijlregel aanmaken’

 Maak nu in het tabblad ’Tekst’ dezelfde aanpassingen als daarnet: kies lettertype Arial en schakel tekstversiering uit.

En dit is het resultaat: in één keer zijn alle links op de pagina aangepast.

Doe nu hetzelfde voor de <li>-definities: onderrand toevoegen en opsommingsteken verwijderen.

Het stijlblad aan de andere pagina’s koppelen

In één ruk door kan u nu ook de links op je andere pagina’s aanpassen.

 Zet de pagina index.html in Bronweergave en ga op zoek naar volgende regel, zo ergens rond regel 7 van je document:

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

Dit is de code die het stijlblad linkt aan uw pagina.
 Kopieer deze code en plak ze op dezelfde plaats in je andere pagina’s, in principe vlak boven de afsluitende </head>-tag.