Handleiding Stijlen in KompoZer

Met behulp van deze tekst laat ik zien hoe je tekst op je webpagina kan opmaken met Stijlen. Een Stijl zegt alleen iets over hoe een webpagina, of een onderdeel daarvan, eruit moet komen te zien. De Stijl zelf komt dus niet in beeld in de browser.

Stijlen kun je op drie manieren gebruiken: (1) inline, (2) met een intern stijlblad en (3) met een extern stijlblad. Al deze drie manieren lichten ik kort toe.

1. Inline Stijlen


Inline stijlen zijn opmaakdefinities die midden in je tekst staan bij een specifiek onderdeel, bijvoorbeeld h1, p, div of body. In ons voorbeeld gaan we de opmaak van de koptitel <h1> met een stijl definiëren. Daartoe voegen we aan het <h1> commando toe: style="color: rgb(255, 0, 0);".

zonder stijl:            <h1>1. Inline Stijlen</h1>

met stijl:                           <h1 style="color: red;">1. Inline Stijlen</h1>

Let op: in dit geval gebruiken we puur rood als kleur. Deze wordt gedefinieerd als red.
We kunnen ook een variatie op rood gebruiken en dan zal de kleurdefinitie er bijvoorbeeld uit zien als "color: 204, 0, 0;"


Dit kun je doen in de modus Bron, maar KompoZer maakt het je gemakkelijker:
1.     Ga op de desbetreffende koptitel staan met de cursor. Helemaal onderin beeld van het KompoZerscherm verschijnt dan <h1>.
2.     Klik op de <h1> onder in beeld met de rechter muisknop en een menuutje opent.
3.     Kies in dat menu Inline stijlen. Een nieuw venster opent getiteld Inline Stijlen (zie figuur). In dat venster zijn zeven tabbladen.
4.     Kies tabblad Tekst en selecteer als Kleur rood. Onmiddelijk wordt de betreffende koptitel rood.
5.     Klik op OK. Het venster sluit weer.
inline stijlen venster
Controleer in het tabblad Bron of de stijlcode inderdaad is ingevoegd.

2. Intern Stijlblad


Inline Stijlen zijn nuttig en snel in te voegen, maar zorgen ervoor dat je webpagina rommelig wordt. Als je later alle koptitels wilt aanpassen zul je ze allemaal af moeten gaan. Daarom is het meestal verstandiger om te werken met een intern stijlblad. Al je stijlen worden dan bovenin je webpagina bij elkaar gezet in de <head>. Een voorbeeld van een intern stijlblad die de koptitels in de webpagina blauw kleurt:

<head>
  <title>Uitleg van Stijlen in KompoZer</title>
  <style type="text/css">
h1 {
  color: blue;
}

  </style>
</head>
 
Dit kun je weer handmatig doen op tabblad Bron, maar ook hier helpt KompoZer:

1. Klik boven in beeld op CaScadeS (of druk op F11). Het venster getiteld CSS Stijlbladen opent.
2. In het linker deel staat reeds +intern stijlblad. Rechts staat de bovenste van vier opties geselecteerd:  stijl toegepast op alle elementen van een type. We selecteren het element in het uitklapbare deel daaronder door op de pijl te klikken. Kies h1.
3. Klik op Stijlregel maken.
4. Een ventser opent dat we herkennen uit de vorige oefening waar we een Inline stijl maakten. Ga naar het tabblad Tekst en selecteer een blauwe kleur.
css stijlbladen venster

5. Klik op OK tot alle hulpvensters weg zijn.
6. Controleer in het tabblad Bron of de stijlcode in de head-sectie is toegevoegd.

Als je interne regels wilt wijzigen of weghalen dan ga je weer naar CaScadeS (F11) en selecteert links de desbetreffende regel. Klik op het rode kruis om de regel weg te halen of bewerk rechts in één van de tabbladen de bewuste regel.
Een nieuwe regel toevoegen gaat door te klikken op het palet linksboven.

3. Extern stijlblad


Een extern stijlblad lijkt erg op een intern stijlblad, alleen de regels worden opgeslagen in een apart bestand. Het grote voordeel daarvan is dat andere webpagina's gebruik kunnen maken van hetzelfde externe stijlblad en dus op dezelfde wijze worden opgemaakt.

We gebruiken het interne stijlblad van oefening 2 om een extern stijlblad mee te maken.

1.    Ga naar CaScadeS (F11)
2.    Selecteer links het interne stijlblad
extern stijlblad maken
3.    Klik rechts op de button met Stijlblad aanmaken en ernaar overschakelen
4.    In een nieuw venster wordt u gevraagd de lokatie te bepalen en de naam van het nieuwe stijlblad in te typen. Kies als lokatie de map waarin uw webpagina's staan (als u veel externe stijlbladen gaat gebruiken is het een overweging waard om daarvoor een aparte map te maken met als naam css). Kies als naam: extern_stijlblad.css. Na de OK is het bestand aangemaakt. In het venster CSS Stijlbladen staat aan de linkerzijde nu extern_stijlblad.css. In dat stijlblad is de regel voor h1 reeds opgenomen.
5.     Wijzig de regel voor h1 van blauw naar groen.
6.     Kijk in het tabblad Bron naar de head-sectie. Daar wordt verwezen naar het externe stijlblad met:  <link rel="stylesheet" href="extern_stijlblad.css"
 type="text/css">


Tot slot

Bedenk dat stijlen elkaar kunnen overlappen. Zo kunnen we een stijl voor de hele body definiëren, bijvoorbeeld blauwe tekstkleur. Als we vervolgens binnen die body voor een koptitel <h1> een rode tekstkleur definiëren, dan heeft die rode kleur voorrang. De meest specifieke stijldefinitie gaat voor een meer algemene.

Verder is het goed om te weten dat er op internet sites zijn die stijlbladen aanbieden. Meestal kun je eerst een aantal sites bekijken en als je een mooie site ziet dan selecteer je die. De bijbehorende stijlbladen download je en gebruik je op je eigen site. In eerste instantie is dat nog lastig, maar als je het eenmaal doorhebt werkt het best snel. Het is in alle gevallen aan te raden om eerst zelf de nodige tijd te investeren in het leren kennen van CaScadeS en het werken met stijlen.