PretLetters

Webontwerp

webontwerp
[Alt]+ gaat naar
Accesskeys
S Sla sectienavigatie over
0 overzicht
1 content
2 techniek
3 html
4 css
5 liquid design
6 overwegingen
B bronnen
G glossary

Cascading Style SheetsStylesheets

Een Cascading Style Sheet, CSS, is een gedeelte van je pagina of een apart bestand, dat beschrijft hoe de pagina als geheel en de verschillende elementen daarin opgenomen er moeten uit zien, volgens jou.
Alles wat in de body van de pagina is opgenomen, en natuurlijk ook de body zelf, kan je vormgeven door in je stylesheet eigenschappen, properties, voor de vormgeving op te geven.

CSS gaat dus echt over uiterlijk, lay-out, en niet over de structuur van de pagina. De structuur geef je aan met HTML.

CSS kan je zo complex maken als je zelf wilt, maar de logica is op zich niet heel ingewikkeld. Met CSS kan je een ongelofelijke hoeveelheid, soms stunning effecten bereiken.
Om te beginnen is het beter om je te concentreren op slechts een aantal eigenschappen en die goed te leren gebruiken. Uitbreiding van die kennis kan later dan altijd nog.

Voorafje

Vormgeving kan op verschillende manieren en op verschillende plaatsen worden opgegeven. Je kan bijvoorbeeld een font voor een paragraaf opgeven door bij het element <p> ook type en grootte van een letter op te nemen; veel voorkomend voorbeeld is:
<p font="Arial" size="2" color="blue">

Een andere manier om hetzelfde te bereiken is:
<p style="font-family:Arial,sans-serif;font-size:100%;color:blue;">
Hier maak je gebruik van de 'taal' van style sheetsstylesheets, maar je zet de vormgeving nog steeds bij het element. De scheiding tussen markup en style is hierbij niet aanwezig en bij iedere losse paragraaf zal je deze opmaakkenmerken moeten herhalen.

Weer een andere manier is om de stijlen die je wil toepassen op de in een pagina gebruikte elementen, apart te zetten in de <head> van je pagina:

<html>

  <head>

    <style type="text/css">

    p {
      font-family:Arial,sans-serif;
      font-size:100%;
      color:blue; }
    
    </style>

  </head>

  <body>
    <p>En dan hier de tekst van de paragraaf.</p>

    <p>En nog een paragraaf, die er precies hetzelfde
    uitziet.</p>

  </body>

</html>
Google Groups discussiegroep: PretLetters Bekijk de discussiegroep op groups.google.com

Alles tussen <style> en </style> is dan je style sheet en de eigenschappen die je daarin aan de elementen toekent, gelden dan voor alles in je pagina (in dit geval dus voor alle paragrafen in je pagina). Kijk, daar heb je wat aan. Nu beginnen we ergens te komen.
Voor de basisstructuur van een pagina verwijs ik je naar de paragrafen over HTML.

Nadeel van een style sheet in de <head> van je pagina is, dat je die iedere pagina opnieuw zal moeten opnemen. In het voorbeeld is slechts één element, <p>, opgenomen, in een enkele pagina. In de ontwikkeling van je site zal je al gauw in ieder geval de veelgebruikte elementen verspreid over veel verschillende pagina's uniform willen kunnen tonen aan de individuele bezoekers. Dan krijg je per pagina een style sheet waarin ten minste tien elementen en waarschijnlijk ook een aantal classes en id's (waarover verderop meer) zijn opgenomen.

Dan wordt het tijd voor een extern stijlblad. Je external style sheet bevat dan alle properties voor alle elementen, classes en id's die je door je hele site heen gebruikt.

De basis van een style sheet

Om style sheetsstylesheets überhaupt probleemloos te kunnen gebruiken, is het noodzakelijk om een relatief strikte scheiding aan te brengen tussen opmaak en structuur van pagina's.
Dat betekent dat vanaf de eerste opzet van een site consequent logische en 'schone' markup voor de pagina's wordt toegepast, waarop de CSS als aanvulling het uiterlijk regelt.

Als achtergrond hiervoor is ook het artikel Eenvoud dat ik in november 2004 heb geschreven, interessant. Daarin wordt dieper ingegaan op wat semantisch werken nou eigenlijk is en hoe je de stap maakt van semantische markup naar geheel met CSS vormgegeven pagina's. Een helder voorbeeld geef ik door de stijlbladen die ik in de loop van jaren heb gebruikt, op één pagina toe te passen, en zo het uiterlijk steeds eenvoudig te wijzigen, zonder dat de inhoud of de structuur van de pagina zelf verandert. Zie daarvoor de (engelstalige) pagina Template History.

Daarnaast moet je je beseffen wat een Cascading Style Sheet nou eigenlijk doet. Uren heb ik soms geworsteld met het uiterlijk van een element, zoals bijvoorbeeld kopjes, zonder te bereiken wat ik wilde. Alleen maar omdat de lay-out ook elders werd omschreven en dat deel voorrang kreeg in het renderen van mijn pagina's.
Bij CSS geldt in het algemeen dat voor één element op verschillende plaatsen allerlei eigenschappen kunnen worden opgegeven, die dan op het scherm samenkomen om het uiterlijk van het element te bepalen. Maar, als op verschillende plaatsen één en dezelfde eigenschap meermaals, maar verschillend, wordt gedefinieerd, zal het element het uiterlijk krijgen, zoals dat de laatste keer dat de eigenschap wordt gedefinieerd, wordt opgegeven.

Ook worden sommige eigenschappen door het ene element overgenomen van een ander element. Dat gebeurt als een selector een child of decendent is van een andere selector.
Zo zullen alle lettergroottes, mits relatief gedefinieerd met een percentage of met em, afhangen van, in eerste instantie, de grootte van het lettertype dat je opgeeft voor de body van je pagina's.
Voor het waarom van het relatief definiëren van fontgroottes verwijs ik je naar de paragrafen over Liquid Design, alsook naar mijn artikel Pennenstrijd van december 2004, waarin diep wordt ingegaan op allerlei perikelen rond lettertypes en groottes.

Uiteindelijk heb ik lang gewerkt om allerlei interne rommel, 'tag soup', weer uit al mijn pagina's te vissen en de opmaak gaandeweg te verzamelen in één extern bestand, dat wordt aangeroepen in al die opgeschoonde pagina's.
Dat betekent dat bovenstaand voorbeeld in mijn geval er als volgt uit zou zien:

<html>

  <head>

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

  </head>

  <body>

    <p>En dan hier de tekst van de paragraaf.</p>

    <p>En nog een paragraaf, die er precies hetzelfde
       uitziet.</p>

  </body>

</html>

Waarbij in het bestand 'styles.css' ondermeer het volgende zou zijn opgenomen:


body {
  background:white;
  margin:2em 3em; }

p {
  font-family:Arial,sans-serif;
  font-size:100%;
  color:blue; }

of zelfs:


body {
  background:white;
  margin:2em 3em;
  font-family:Arial,sans-serif;
  color:blue; }

waarbij het paragraafelement, <p>, volautomatisch de kenmerken van de <body> aan zal nemen bij het renderen van mijn pagina's en de lettergrootte niet gedefinieerd hoeft te worden. 100% Is de standaard.

Selectors

Selectors omvatten elementen, classes en ID's. De elementen, classes en ID's geef je in je style sheet eigenschappen, properties mee die het uiterlijk van je pagina's bepalen in een grafische browser. Tekstbrowsers of voorlees- en braillebrowsers trekken zich niets aan van de lay-out, die jij over je pagina's legt. Die browsers moeten het hebben van een goede mark-up.

Elementen

Vrijwel de belangrijkste van alle elementen is het 'element' <body>. Geen 'echt' element, zoals een paragraaf of tabel dat is, maar met het definiëren van de eigenschappen van de body, bepaal je al heel veel voor het uiterlijk van je pagina's.

Het minste dat je nodig hebt aan eigenschappen voor de <body>, is:

body {
  background : achtergrondkleur
               url("locatie achtergrondplaatje") ;
  margin : boven rechts onder links ;
  font-family : lettertype ;
  font-size : lettergrootte ;
              /* Al kan je die heel goed weglaten */
  color : tekstkleur ; }

Alle andere elementen, voorzover je geen andere eigenschappen voor ze definieert, zullen deze kenmerken als basis nemen.

Voor mij zijn de belangrijkste elementen, die ik in al mijn pagina's gebruik, <p>, <h1 t/m 4>, <ol>, <ul> en <li>, <table> met <th> en <td>, <a>, <code> en <pre>. En <div> natuurlijk. Vergeet de <div> niet.

Omdat ik deze elementen frequent gebruik, zijn het deze die ik in mijn style sheet kenmerken, eigenschappen, mee heb gegeven. Als ik deze elementen in mijn markup gebruik, zonder daarbij extra eigenschappen te definiëren, zullen zij automatisch de eigenschappen aannemen die ik ze in mijn style sheet heb meegegeven.

Een groot voordeel van elementen in je style sheet opnemen, is dat je nagenoeg volledige zeggenschap krijgt over het uiterlijk ervan (in moderne grafische browsers dan). Ik heb me kapot geërgerd aan bijvoorbeeld de ruimte die altijd weer ontstond rond de in mijn markup opgenomen kopjes. Door in mijn style sheet zèlf te bepalen hoe groot de letters moesten worden en met welke padding en marge voor de elementen <h 1 t/m 4>, werd ik van die ergernis verlost.

En zo zijn er meer voorbeelden. Ik bepaal nu hoe mijn tabellen er uit zien en wat het lettertype en de regelafstand is binnen het blokelement <pre>

Ander groot voordeel is dat ik niet langer kan vergeten om een achtergrondkleur op te geven voor de <body> van mijn pagina's. Niet iedereen heeft de standaard achtergrondkleur van de browser op wit of lichtgrijs staan. Voor mijn pagina's maakt dat niet meer uit.

Laatste grote voordeel, en het belangrijkste wat dat betreft, is natuurlijk dat ik met een eenvoudige aanpassing van één klein bestandje het volledige uiterlijk van mijn site kan veranderen. Ik hoef niet te zoeken, ik hoef geen honderden malen <p font="Arial" size="2"> meer op te zoeken in mijn tientallen pagina's om ze bijvoorbeeld te veranderen in 'Arial Narrow', mocht ik dat willen. Ik pas het lettertype van de <body> aan in mijn style sheet en klaar is Kees.

Zie bijvoorbeeld mijn blogartikel Complete Make-over. Daarin beschrijf ik hoe ik tewerk ben gegaan bij een complete redesign van deze site. Het bleek heel eenvoudig, maar dat was alleen mogelijk door het door en door consequent gebruik van een extern stijlblad.

Met het in een extern stijlblad opgeven van kenmerken voor de elementen die je in je markup gebruikt, krijg je een goed beheersbaar geheel en kan je geconcentreerd werken aan een evenwichtige lay-out van je site. Als je je daarbij blijft realiseren hoe Cascading Style SheetsStylesheets in de basis werken, kan je met alleen dit vormgeven van de elementen al heel veel bereiken.

Classes

Classes voegen daar een heel krachtig middel aan toe. Classes geven een grote vrijheid in het consequent kunnen toepassen van opmaak die afwijkt van de standaard, zoals je die bij de elementen hebt opgegeven, maar zonder daarbij rommelig te worden.

Met Classes kun je ook bereiken dat specifieke stukjes inhoud op strak gedefinieerde plaatsen in het browservenster terecht komen bijvoorbeeld. Met classes kan je ook 'dynamische' opmaak fingeren, door bijvoorbeeld een hover effect over menu's te zetten.
Terzijde: Voor meer over menu's kan je mijn voorbeelden van menu's bekijken. In mijn blog besteed ik ook aandacht aan menu's met HTML en CSS in een artikel over CSS Rollovers op horizontale menu's. Daar heb ik ook een geïsoleerd voorbeeld van samengesteld, omdat juist over dat onderwerp nogal eens vragen worden gesteld.
Bestudeer ze gerust om te leren hoe markup en style bij CSS Rollovers op menu's samenwerken.

Verder kan je allerlei margins en padding en borders om blokelementen definiëren waar je maar wilt.

Classes kan je 'vrij' definiëren of gekoppeld aan een specifiek element:

.vet-groot {
  font-style:bold;
  font-size:125%; }
/* kan aan alle elementen worden geplakt */

p.cursief-groot {
  font-style:oblique;
  font-size:125%; }
/* kan alleen met paragrafen worden gebruikt */

Sommige opmaakcombinaties zijn dermate complex en specifiek, dat je ze niet per ongeluk op een ander element wil toepassen, dan waar het oorspronkelijk voor was bedoeld. Dan gebruik je de laatste syntax van het voorbeeld. Een toegewezen class.
Voor het simpelere spul voldoet een vrije class.

In mijn eigen pagina's zijn bijvoorbeeld het menu en de extraatjes als het zoekvakje en de bezoekersteller met classes op het scherm geplaatst. Als ik illustraties in pagina's gebruik, geef ik met een class aan hoe het randje om het plaatje er uit ziet en wat de margin en padding zijn. Daarnaast worden plaatjes standaard buiten de tekst geplaatst als blokje tegen de rechter kantlijn van de pagina door de illustratie te 'floaten'.
Dit gebeurt allemaal met vrije classes.

Een heel ander verhaal is mijn weblog, waarvoor ik voor bijvoorbeeld de body een aparte class heb samengesteld, omdat de marges geheel anders moesten zijn dan op de pagina's van de rest van mijn site. Deze class, body.weblog, is dus toegewezen. Daar wil ik me niet in kunnen vergissen.

Classes mogen naast elkaar, tegelijk voor één element, gebruikt worden. Stel, je hebt de volgende classes in je style sheet staan:

.behoorlijk {
  display:block;
  letter-spacing:1px;
  line-height:145%;
  border-bottom:1px dotted red;
  font-weight:bold; }

.vrolijk {
  display:inline;
  background-color:blue;
  color:yellow;
  font-size:115%;
  font-style:oblique;
  border:2px dotted orange; }

en ergens in je markup schrijf je:

<span class="behoorlijk vrolijk">Ik ben vandaag
zo vrolijk, zo vrolijk, zo vrolijk. Ik ben behoorlijk
vrolijk. Zo vrolijk was ik nooit.</span>

Dan is dit het resultaat:

voorbeeld:

waarbij je misschien opvalt, dat de border van de class="vrolijk" wordt genomen en níet die van de class="opvallend". Dat is dan natuurlijk, omdat die eerste, vrolijk, als laatste de eigenschap voor de randen definieert.
Ook kan het je zijn opgevallen dat het display:block; van de class .behoorlijk wordt genegeerd. Dat is dan omdat de class .vrolijk hiervoor display:inline; opgeeft en deze eigenschap als laatste wordt opgegeven.

Dit is een voorbeeld van Cascading Style SheetsStylesheets en hun werking. De verschillende stijlen worden samengevoegd, waar jij dat bepaalt en daarbij worden díe kenmerken toegepast, die je als laatste opgeeft.

Classes mag je onbeperkt gebruiken in je pagina's. Als jij één en dezelfde class vijfentachtig keer in één pagina nodig hebt, geen probleem.

ID's

Dat geldt niet voor de ID's in een pagina. Een ID heeft wel wat weg van een sofi-nummer. Op iedere pagina mag je een ID (afkorting voor identity) maar één keer gebruiken.
Je mag dezelfde ID overigens wel op meerdere pagina's gebruiken, op al je pagina's desnoods.

Logische ID's zijn dingen als #titel of #kop en bijvoorbeeld #menu. Door deze elementen in je pagina een ID te geven in plaats van een class, kun je de bezoeker middels een verwijzing in de markup van de pagina er eenvoudig naar laten verspringen. Bovendien kan je ID's op eenzelfde manier kenmerken geven als een class.
Zo kan je bijvoorbeeld een 'top level layout' creëeren, waarmee je heel consequent het uiterlijk van al je pagina's gelijk weet te houden.

Voorbeeld (mijn eigen 'paginasjabloon':

<!DOCTYPE>

  <html lang="nl">
    <head>
      met de meta-gegevens en de links naar het stijlblad en
      pagina-icoontje
    </head>

    <body>

      <div id="preload">
        Waarin je plaatjes opneemt die vooraf geladen moeten worden,
        en die je met CSS voor normale weergave
        verbergd.
      </div>

      <div id="kop">
        met hier de kop(tekst) van de pagina
      </div>

      <div id="content">
        Hierbinnen plaats je je inhoud

        Eventueel met een
        <div id="pagemenu">
          paginamenuutje
        </div>

      </div>

      <div id="menu">
        Hierin je menu-items, liefst een lijst die je met CSS
        opmaakt.
      </div>

  </body>
</html>

Deze 'indeling' van je markup maakt het heel eenvoudig om de verschillende delen van de pagina exact zo te plaatsen en op te maken (in moderne, mainstream, grafische browsers), als jij wilt. Iedere div met een aparte ID is in je stijlblad uitstekend heel nauwkeurig op je scherm te zetten. Bovendien kan je die divs een eigen stijl meegeven, niet alleen voor de div als geheel, maar ook voor alle elementen die je binnen de div plaatst.
Zo kan je de tekstkleur en grootte per div bepalen, maar ook de achtergrondkleur van de div als geheel bijvoorbeeld, of hoe een tabel of lijst wordt opgemaakt.
Deze manier van divs gebruiken geeft je een enorm krachtige tool om de schermlayout in moderne grafische browsers optimaal te beheersen.

Dat is dan ook het nut en de kracht van een ID. Het creëren van een sjabloon, waarbij je meteen de mogelijkheid hebt om je bezoeker met een muisklik naar een ander deel van je pagina te sturen.
Voor het overige zijn in de style sheet de properties precies zo aan een ID toe te wijzen, als aan een class.

Houd er verder rekening mee, dat in de cascade de properties die aan een ID zijn toegewezen meer wegen, belangrijker zijn, dan die aan een class zijn toegewezen. Dat betekent dat de properties van een ID voorrang krijgen op die van een class, ook als de class het laatste in de cascade is opgenomen.
Om de properties van de class toch te laten gelden, moet je in je stijlblad !important opnemen bij de property.

Toepassing

Misschien dat je uit de voorbeelden al hebt begrepen hoe classes en ID's worden toegepast. Voor de volledigheid toch even dit nog:

Een extern stijlblad kan in een gewone textbewerker, zoals Notepad, worden geschreven. Als het bestand wordt opgeslagen met de extensie .css en in de html-pagina's wordt opgevraagd met <link rel="stylesheet" type="text/css" ref="naam.css"> gaat het goed.

Classes, syntax

In de style sheet, bijvoorbeeld:

/* Tussen deze combinatie van lettertekens kan je
veilig commentaar opnemen in je . Ze hebben
dezelfde functie als het misschien beter bekende
<!-- commentaar: teksterdetekst tekst -->
in de markup van html-pagina's. Ze houden het commentaar
buiten de verwerking van de styles. */

.naam {
/* de properties, bijvoorbeeld: */
  font-family : Arial , sans-serif ; }

In de markup, bijvoorbeeld:

<p class="naam">Deze paragraaf verschijnt dan in lettertype Arial.</p>

ID's, syntax

In de style sheet, bijvoorbeeld:

/* hier onder staat een voorbeel van CSS voor het
samenstellen en opmaken van een navigatiemenu met
hover effect, waarbij het menu en de items als
een gewone lijst in de markup geplaatst zijn */

div#menu {
  display:block;
  position:absolute ;
  top:150px ;
  left:12px ; }

div#menu ul {
  margin:0;
  padding:0; }

div#menu li {
  display:block;
  list-style:none;
  text-indent:0;
  width:95px;
  text-align:center;
  background-color:black;
  color:yellow;
  border:outset 3px; }

div#menu li a {
  display:block;
  width:100%;
  background-color:black;
  color:yellow;
  text-decoration:none; }

div#menu li a:hover {
  display:block;
  width:100%;
  background-color:yellow;
  color:black;
  text-decoration:none; }

div#menu li a:visited, div#menu li a:active {
  display:block;
  width:100%;
  background-color:black;
  color:yellow; }

In de markup, bijvoorbeeld:

<div id="menu">
<ul>
    <li><a href="page1.html">page 1</a></li>
    <li><a href="page2.html">page 2</a></li>
    <li>
    <a href="voorbeeld_menu-met-hovereffect.html">meer menu's</a>
    </li>
</ul>
</div>

voorbeeld:

Voor verwijzing naar je menu, van waar dan ook in je pagina door te verwijzen naar de <id>, bijvoorbeeld:

[...] Om naar een ander gedeelte van mijn site te gaan,
verwijs ik u naar het <a href="#menu"
title="Navigatiemenu van deze site">menu</a>. [...]

Tot slot

Anders dan bij HTML, waar je met een handjevol elementen al aardig uit de voeten kunt, is CSS relatief complex. De logica is helder, maar het aantal mogelijkheden is schier oneindig.

Vandaar dat ik aan het begin van deze pagina voorzichtig voorstelde om te beginnen bij wat je echt nodig hebt: de opmaak van de elementen die je veel gebruikt. En van daaruit je kennis uit te breiden.
Dat gaat redelijk vlot, als je in de broncode van de pagina's die je op het internet bezoekt, nazoekt welk stijlblad zij gebruiken en dat stijlblad dan opvraagt.
Mijn style sheet staat op http://www.pretletters.net/stylesheets/stijlblad.css. Je ziet in de <head> van mijn source nog een style sheet aangeroepen worden. Dat is het stijlblad waarin ik bepaal (waar mogelijk), hoe mijn pagina's uit een printer komen rollen.

Het staat je geheel vrij om deze stijlbladen voor schermweergave en printen, in combinatie met mijn markup te bestuderen. Zo heb ik zelf heel veel geleerd van anderen.

Als je je nog afvraagt waarom je met CSS aan de slag zou moeten, zou je eens kunnen kijken naar mijn artikelen Eenvoud en Accessibility en Usability, beide van november 2004, waarin dieper wordt ingegaan op de filosofie van gestructureerd en semantisch werken met de bezoeker in gedachte. Mijn pagina over Liquid Design voegt daar het zijn nog aan toe.
Lees ze en laat je overtuigen.

Voorbeelden

De in deze pagina gebruikte voorbeelden en meer heb ik apart beschikbaar:

Overzichtje
voorbeeld van pagina style sheet
twee kolommen layout beschikbaar beschikbaar
gecentreerde content beschikbaar beschikbaar
verticaal centreren beschikbaar beschikbaar
menu met hovereffect beschikbaar beschikbaar
CSS Rollover op horizontaal menu beschikbaar in pagina
frames simuleren beschikbaar beschikbaar
sitebrede news alert box beschikbaar beschikbaar, non-IE
pop-up's met CSS beschikbaar beschikbaar, non-IE
classes combineren beschikbaar in pagina
voorbeelden en testpagina's die zijn ontwikkeld in een reactie op berichten in nieuwsgroepen op usenet: testpagina's

Een goed punt om te beginnen met het leren van CSS is bij het W3C: CSS, een startpunt.
Bij het W3C is ook de technische specificatie van CSS 2.1 te vinden en kan je je stijlblad laten valideren.

copyright © 2003-2005 Barbara de Zoete