XHTML en CSS





























Ruud Koortens
Frans Peeters

januari 2008
 


 
Inhoudsopgave

Inleiding	i

1.	XHTML 1.0	1
1.1.	XML Declaratie	1
1.2.	Het juiste DOCTYPE in hoofdletters	2
1.3.	De XML-namespace	2
1.4.	De <title>	2
1.5.	De juiste karakterset	2
1.6.	Een extern css-bestand	3

2.	XHTML afspraken	4
2.1.	Alle tagnamen met kleine letters	4
2.2.	Alle tags afsluiten	4
2.3.	Alle waarden van attributen tussen aanhalingstekens	4
2.4.	Elk genoemd attribuut moet een waarde hebben	4
2.5.	Afbeeldingen moeten een alt hebben	5
2.6.	Alle elementen moeten correct genest zijn	5
2.7.	Commentaar	5
2.8.	De & en < correct coderen	5

3.	Cascading Style Sheets	6
3.1.	Scheiding tussen structuur, inhoud en opmaak	6
3.2.	Overerving	6
3.3.	De syntaxis van CSS rules	8
3.4.	Waar kun je CSS plaatsen?	9
3.4.1.	Inline CSS	9
3.4.2.	Embedded CSS	9
3.4.3.	External CSS	10
3.5.	Selectors	11
3.5.1.	Universal selector	11
3.5.2.	Element type selector	11
3.5.3.	Class selector	12
3.5.4.	id selector	12
3.5.5.	Pseudo-element selector	13
3.5.6.	Pseudo-class selector	14
3.5.7.	Descendant selector	14
3.5.8.	Parent-child selector	14
3.5.9.	Adjacent selector	15
3.6.	Positionering van pagina-elementen	16
3.6.1.	Display	16
3.6.2.	Het Box Model	18
3.6.3.	Padding, margin en border	19
3.6.4.	Positionering, absoluut en relatief	24
3.6.5.	Float en clear	25
3.6.6.	Float en clear in de praktijk	28
3.7.	Fonts	32
3.7.1.	De font-family eigenschap	33
3.7.2.	De font-size eigenschap	33
3.7.3.	Hoe meten we?	34
3.7.4.	De font-style eigenschap	35
3.7.5.	De font-weight eigenschap	35
3.7.6.	De font shorthand eigenschap	35
3.7.7.	De font variant eigenschap	35
3.8.	Teksteffecten	35
3.8.1.	Tekstuitlijning	35
3.8.2.	Pseudo-element selectors	37
3.8.3.	Het opmaken van hyperlinks	38
3.8.4.	Kleur	38
3.8.5.	Het gebruik van kleuren bij het ontwerp van een website	39
3.8.6.	De kleur van de body instellen	41
3.8.7.	Transparantie en kleuren	41
3.8.8.	Wetenswaardigheden over kleur en achtergrondafbeeldingen	42

4.	CSS lay-outs	44
4.1.	Twee kolommen voorbeeld lay-out met CSS	44
4.2.	Voorbereiding	44
4.3.	Stap 1: body eigenschappen instellen in het stijlblad	44
4.4.	Stap 2: division container definiëren	45
4.5.	Stap 3: HTML document maken en stijldefinities toepassen	45
4.6.	Stap 4: kopregel definiëren en toepassen	46
4.7.	Stap 5: de hoofdsectie met de inhoud en zijbalk	49
4.8.	En nu verder …	54

Bijlage: Nuttige links	55
 
Inleiding

Voor wie is deze reader?
Deze reader is geschreven voor personen die enige ervaring hebben met HTML en dan ook al een keer een website hebben gemaakt. Je weet wat de basisstructuur van een HTML pagina is, hoe je een pagina met gebruik van HTML tags opmaakt en hoe je interne of externe hyperlinks kunt maken.

Tabellen, framespagina’s of CSS?
Je hebt bij het maken van je website misschien gebruik gemaakt van tabellen of van frames. Tabellen worden soms gebruikt om elementen op een webpagina te positioneren. Dit leidt tot onoverzichtelijke en complexe code en zorgt er voor dat de pagina minder snel geladen wordt dan wenselijk is. Het onderhoud van de site wordt door het gebruik van tabellen omslachtig en leidt soms tot verminking van de lay-out. Een tabel kan gebruikt worden voor de presentatie van gestructureerde gegevens, maar liever niet voor de vormgeving van een webpagina.
Framespagina’s hebben weer andere nadelen. Je kunt bijvoorbeeld maar moeilijk de juiste pagina inclusief het menu opslaan in je favorieten en het deeplinken naar pagina’s is niet goed te doen. Het grootste nadeel is momenteel dat framespagina’s heel lastig zijn voor PDA’s en mobiele telefoons met internet.
Op informaticavo vind je dezelfde mini-website op drie verschillende manieren gemaakt:
- met frames		www.informaticavo.nl/websites/frames
- met tabellen		www.informaticavo.nl/websites/tabellen
- met CSS		www.informaticavo.nl/websites/css
Websites met frames en tabellen worden steeds minder gebruikt omdat ze langzamer zijn en moeilijker te onderhouden. Daarvoor in de plaats kun je CSS divisions gebruiken. In deze reader gaan we leren hoe we een juiste xhtml pagina met CSS kunnen maken.

HTML of XHTML?
Deze reader is gebaseerd op XHTML 1.0, de opvolger van HTML 4.01.

Gebruiksvriendelijke websites
Gebruiksvriendelijkelijkheid (usability in het Engels) heeft te maken met het gebruiksgemak van een apparaat of een computerprogramma. Gebruiksgemak is een belangrijk criterium geworden voor gebruikers van hardware en software. Als bij het ontwerp van een website verkeerde beslissingen worden genomen, wordt zo’n site al snel onhandig gevonden en wordt deze niet gebruikt. Hoe mooi een website ook kan zijn, als de bediening lastig is, is de aantrekkingskracht verdwenen en zullen bezoekers niet terugkomen. Een website moet dan ook ontworpen worden met gebruiksgemak in gedachten.
Hoewel gebruiksgemak persoonlijke en subjectieve elementen bevat, zijn er objectieve criteria voor usability ontwikkeld. Het gaat om effectiviteit, efficiëntie, satisfactie, learnability en memorability.

•	Effectiviteit:	Wat kun je er mee?
•	Effectiviteit:	Welke moeite moet je doen om je doel te bereiken?
•	Satisfactie:	Ben je tevreden over het product?
•	Learnability:	Hoe lang doe je er over om met het product te leren werken?
•	Memorability:	Hoe gemakkelijk is het om het geleerde over de bediening van het product te onthouden als je er een tijd niet mee hebt gewerkt?
Het is voor een website van belang dat alle - ook nieuwe - gebruikers snel naar hun doel geleid worden. De bezoeker moet eenvoudig en snel kunnen vinden wat hij op de site zoekt.
De informatie op de website bestaat niet uit grote stukken tekst maar uit opsommingen, lijsten, hyperlinks, etc. De bezoeker zal immers niet geneigd zijn om veel te lezen maar zal snel scannen naar informatie die voor hem van belang is.
De leesbaarheid van de site is ook van belang, de kleurstelling (contrast tussen voorgrond tekst, symbolen, links, en dergelijke) en achtergrond (kleur en/of afbeelding) speelt hierbij een grote rol.
Bron: Chip, november 2007. Lees ook de 29 tips op www.usability.nl/.

 
1.	XHTML 1.0
XHTML 1.0 is de oudste versie van eXtended HyperText Markup Language en de directe opvolger van HTML 4.01. 

Binnen XHTML 1.0 zijn er weer drie subtypen te onderscheiden:
•	XHTML 1.0 Strict
•	XHTML 1.0 Transitional
•	XHTML 1.0 Frameset

In XHTML 1.1 worden tags die in HTML 4.01 de status deprecated (verouderd) hadden helemaal verboden. Zo mogen bijvoorbeeld <font> en <center> niet meer worden gebruikt in XHTML. Nog nieuwer is XHTML 2.0 en dat is helemaal niet compatibel met HTML of XHTML 1.0. Bestaande browsers zullen niet vanzelf XHTML 2.0 ondersteunen en het is ook nog niet af. De laatste stand van zaken vind je op www.w3.org/TR/xhtml2/. Aangezien XHTML 1.1 en 2.0 nog te nieuw zijn, gaan we aan de slag met XHTML 1.0. Daarbinnen kiezen we dan voor XHTML 1.0 Strict dat aan erg strenge eisen moet voldoen. Als je een website wil ombouwen van HTML naar XHTML kun je wellicht beter Transitional nemen.
In deze reader behandelen we enkel het maken van een website met behulp van CSS en wel met xhtml van het type strict. 
XHTML is ontworpen om de regelloosheid en wildgroei tegen te gaan en om er voor te zorgen dat HTML-code op een correcte en gelijke wijze wordt geschreven. Elke XHTML-pagina heeft een vaste kop waarin verschillende zaken worden vastgelegd. We zullen alle regels van onderstaande voorbeeldkop even doornemen.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
  <head>
    <title>
      Een XHTML 1.0 Strict standaard template
    </title>
    <meta http-equiv="content-type" content="text/html;
	charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link href="opmaak.css" rel="stylesheet" type="text/css" media="all" />
  </head>
  <body>
	<p>Hier komt de website.</p>
  </body>
</html>

1.1.	XML Declaratie
Wanneer XHTML wordt gebruikt voor de markup van websites kun je een zogenaamde XML declaratie gebruiken vóór de DOCTYPE declaratie.

<?xml version="1.0" encoding="utf-8"?>

De XML declaratie kan weggelaten worden maar dan kan het document van geen andere karakterset dan utf-8 of utf-16 gebruik maken.
1.2.	Het juiste DOCTYPE in hoofdletters
De eerste regel in een XHTML-bestand geeft altijd het juiste documenttype aan. Hiervoor wordt de tag <!DOCTYPE> gebruikt. Dit vertelt de browser dat het navolgende document geïnterpreteerd moet worden als XHTML-document en welke regels moeten worden toegepast bij het parsen en renderen van de pagina. 
Bovendien wordt het DOCTYPE gebruikt voor de juiste validatie, zoals je die bij http://validator.w3.org kunt laten doen. DOCTYPE bestaat ook in HTML 4.0 maar geen browser maakt er zich druk om als het ontbreekt. Alle XHTML-tags worden in kleine letters geschreven maar het woord DOCTYPE staat altijd in hoofdletters.
Aangezien er drie typen XHTML 1.0 zijn, zijn er ook drie DOCTYPES beschikbaar voor XHTML, namelijk Transitional, Strict en Frameset. We kiezen voor het DOCTYPE dat past bij XHTML Strict.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
	“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Het DOCTYPE verwijst altijd naar de site van de W3C en het komt te staan vóór <html>.
1.3.	De XML-namespace
Aangezien elk XHTML-bestand een valide XML-document is, moet ook de namespace worden opgegeven. Een namespace is een verzameling bij elkaar horende elementen en hun attributen die bij een zogenaamde Document Type Definition (DTD) horen. In de DTD worden formele specificaties vastgelegd op grond waarvan ze kunnen worden gevalideerd. Een DTD geeft onder meer aan wat de elementen zijn, waar ze voorkomen, wat de kenmerken zijn waaraan ze moeten voldoen, enzovoorts.
Je geeft de namespace aan door de basistag <html> uit te breiden met een aantal attributen. Behalve de locatie waar de namespace gevonden kan worden, wordt aangegeven in welke taal de XML-versie is gesteld en in welke taal het document is gesteld. De tag <html> komt er dan op de volgende manier uit te zien:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">

1.4.	De <title>
In de <head> komt op elke pagina de <title> van de pagina. Je ziet deze <title> bijvoorbeeld terug als je de pagina opslaat bij je favorieten. In dit geval is de <title> “Een XHTML 1.0 Strict standaard template”.

1.5.	De juiste karakterset
Via een metatag in de <head> van het document wordt aangegeven welke tekenset gebruikt wordt. Je kunt bijvoorbeeld werken met de standaard tekenset ISO-8859-1 (ook wel bekend als Latin-1), ASCII of UTF-8 (Unicode).

<meta http-equiv=”content-type” content=”text/html; charset=utf-8”>

1.6.	Een extern css-bestand
In de meta regel daaronder wordt verteld dat er gebruik gemaakt wordt van cascading style sheets en dat text/css het default style sheet is.

<meta http-equiv="Content-Style-Type" content="text/css" />

We maken gebruik van een extern opmaakbestand dat in dit geval “opmaak.css” heet. In dat externe bestand wordt alle opmaak vastgelegd. Je bent niet verplicht gebruik te maken van een extern opmaakbestand maar in deze reader gaan we daar wel mee aan de slag.

<link href="opmaak.css" rel="stylesheet" type="text/css" media="all" />
 
2.	XHTML afspraken
2.1.	Alle tagnamen met kleine letters
In HTML maakt het allemaal niet uit of je de tagnamen in hoofdletters of kleine letters schrijft: het resultaat is hetzelfde. XHTML is echter case-sensitive en alle tags en attributen moeten met kleine letters worden geschreven.
Let op: De waarde of de inhoud van een attribuut hoeft niet per se in kleine letters geschreven te worden. Op een systeem met Microsoft Internet Server maakt het allemaal niet zoveel uit maar bestandsnamen op een UNIX- of Linux-server zijn hoofdlettergevoelig. HomeSite, Dreamweaver en nog een aantal andere website editors kunnen in één klap alle tags omzetten naar kleine letters. Dat kan van pas komen als je een bestaande website van HTML naar XHTML wil aanpassen.
2.2.	Alle tags afsluiten
HTML kent het onderscheid tussen open tags en containertags. De open tag <br> hoef je in HTML bijvoorbeeld niet te sluiten. In XML (en dus ook in XHTML) moet elke tag worden gesloten. Je kunt bijvoorbeeld dit schrijven:

Dit is het einde van een zin.<br></br>.

De break tag kan echter eenvoudig worden geopend en gesloten door te eindigen met een spatie, dan een slash en vervolgens het groter-dan-teken om de tag te sluiten. Je krijgt dan de volgende self-closing tag:

Dit is het einde van een zin.<br />.

2.3.	Alle waarden van attributen tussen 	aanhalingstekens
In HTML maakt het niet uit of je de waarden van attributen tussen aanhalingstekens zet of niet. In XHTML moeten waardes van attributen altijd omsloten worden door aanhalingstekens. Zo kun je in HTML gerust de volgende code gebruiken:

<img src=plaatje.jpg alt=Onze leraar align=left>

Maar in XHTML moet dat zijn: 

<img src=”plaatje.jpg” alt=”Onze leraar” style=”float: left” />.
2.4.	Elk genoemd attribuut moet een waarde hebben
Elk genoemd attribuut moet een waarde hebben, maar soms is de waarde van het attribuut gelijk aan de naam van het attribuut. Kijk maar naar het volgende voorbeeld. Het ziet er een beetje vreemd uit maar het moet wel zo.

<input type=”checkbox” value=”15” checked=”checked” />

2.5.	Afbeeldingen moeten een alt hebben
In een alt wordt een beschrijving gegeven van de afbeelding die je gebruikt. Vroeger was de alt belangrijk voor browsers die bepaalde afbeeldingen niet konden weergeven, maar dat is al lang niet meer zo. Je kunt je wel voorstellen dat de alt belangrijk is voor slechtziende mensen die een spraakmodule gebruiken. De alt mag wel leeg zijn: alt=””.









2.6.	Alle elementen moeten correct genest zijn
Bij het nesten van elementen moet je van binnen naar buiten werken. Het element dat het laatst is geopend, moet het eerst worden gesloten. Aan deze twee voorbeelden kun je zien wat er bedoeld wordt.

Hier is goed genest:

<i><b>schuin en vet</b></i>

En hier is niet goed genest:

<i><b>schuin en vet</i></b>
2.7.	Commentaar
Normaal commentaar in HTML code ziet er als volgt uit:

<!--Commentaar -->

Dit mag in XHTML ook zo, maar je mag niet meer dan twee streepjes na het uitroepteken plaatsen. In plaats daarvan kun je bijvoorbeeld spaties tussen de streepjes zetten.

<!-- - - - - - - - - - - - - - - Commentaar - - - - - - - - - - - - -->
2.8.	De & en < correct coderen
De ampersand en het kleiner-dan-teken hebben een speciale betekenis en ze moeten daarom altijd aangegeven worden met hun entiteitnamen &amp; en &lt;. Het  is trouwens altijd verstandig de entiteitnamen te gebruiken of de unicodenotatie. Een mooi overzicht vind je op Handleiding HTML: www.handleidinghtml.nl/html/karakters/karakters03.html.
 
3.	Cascading Style Sheets
3.1.	Scheiding tussen structuur, inhoud en opmaak
De structuur (en de inhoud) van een document regel je met XHTML en de opmaak leg je vast in CSS. Alles wat mogelijk was met HTML kan met CSS, maar alles wat je met CSS kunt, was lang niet mogelijk in HTML.
3.2.	Overerving
De afkorting CSS staat voor Cascading Style Sheets. Een cascade is een waterval en de naam is gekozen omdat stylesheets elkaar kunnen aanvullen of overrulen via overerving.  Elementen kunnen eigenschappen erven van het bovenliggende element. In CSS heet dit inheritance of overerving. Het betekent dat een kindelement de waarde van bepaalde eigenschap overneemt van het ouderelement.

Boomstructuur van overerving
Hieronder zie je de boomstructuur van een document. Hier spelen de begrippen als parent, child en afstammeling een belangrijke rol. 

  
De bijbehorende HTML code is:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
  <head>
    <title>Een XHTML 1.0 Strict standaard template</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link href="opmaak.css" rel="stylesheet" type="text/css" media="all" />
  </head>
  <body>
    <h1>Een kop</h1>
    <p>Een alinea met <em>nadruk</em> op een woord.</p>
    <div>
      <ul>
        <li>een item van een opsomming</li>
        <li>nog een item</li>
      </ul>
    </div>
  </body>
</html>

•	html is het hoofdelement of de root
•	alle andere elementen zijn afstammelingen van html
•	h1, p, div zijn kinderen van body
•	em is een child van p
•	ul is een child van div
•	li is een child van ul en afstammeling van div en body

Met andere woorden: het element HTML bevat de elementen head en body, deze elementen bevatten op hun beurt andere elementen die weer elementen kunnen bevatten. Bijvoorbeeld de genoemde div(ision) bevat een ul element. De division is hier het bovenliggende element ten opzichte van ul. Het ul element (ongeordende lijst) bevat twee op zijn beurt lijstitem elementen, het em element is in de paragraaf geplaatst en benadrukt het stukje tekst dat daar weer in is geplaatst. 

De boomstructuur van het document heeft gevolgen voor het stijlblad. Zie het voorbeeld uit een denkbeeldig stijlblad:

body { font-family: Arial, Helvetica; } 
h1 { font-family: Verdana; } 
p { }
em { }
div { font-family: Verdana; } 
ul { }
li { }

Alle tekst in het body element heeft Arial, Helvetica als lettertype definitie. Het lettertype in h1 is niet hetzelfde lettertype maar wordt overschreven (overruled) door de eigen definitie. Het p element krijgt toch weer Arial, Helvetica, net als em. Het ul en li element krijgen echter Verdana als lettertype toegewezen.

Een kritische lezer zou nu overigens kunnen opmerken dat het in dit geval zinloos is om het p element in het stijlblad te definiëren, er is immers niets nieuws in de definitie van p.
3.3.	De syntaxis van CSS rules
CSS moet volgens een bepaalde set van regels worden vastgelegd. Het is te vergelijken met de grammatica oftewel de syntaxis van een taal. De regels zijn als volgt:
•	Eerst wordt een selector genoemd.
•	Vervolgens staat er een accolade.
•	Dan komt er een attribuut.
•	Na de attribuutnaam volgt een dubbele punt.
•	Daarna volgt de waarde van het attribuut.
•	Elke declaratie wordt afgesloten met een puntkomma.
•	Het blok met declaraties wordt afgesloten met een accolade.





Voorbeeld:

h1	{
	color : #333;
	font-size : x-large;
}
 
3.4.	Waar kun je CSS plaatsen?
Je kunt op drie plaatsen CSS vastleggen:

3.4.1.	Inline CSS
Overal binnen de HTML-code kun je CSS plaatsen. Het verdient geen schoonheidsprijs en we gaan dit zo dan ook niet doen, maar toch maar een voorbeeld:

<h2 style=”color: red; text-transform: uppercase;”>Een
	ongebruikelijke kop</h2>

De kop wordt in een rode kleur en in hoofdletters in de browser getoond. 


Opdracht:

Maak een XHTML bestand en plaats de bovenstaande regel in de body en bekijk het resultaat.


3.4.2.	Embedded CSS
Het is ook mogelijk in de head een style vast te leggen en die verderop in de body te gebruiken. De kop van een document ziet er dan bijvoorbeeld zo uit:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>XHTML en CSS</title>
    <style type="text/css">
        h1      {color : red;}
        h2      {color : green;}
        h3      {color : blue;}
    </style>
  </head>
  <body>
    <h1>Dit is een h1.</h1>
    <h2>Dit is een h2.</h2>
    <h3>Dit is een h3.</h3>
  </body>
</html>


Opdracht:

Maak het bovenstaande XHTML document en bekijk het resultaat.
Overal in het document zal de <h1> rood zijn, de <h2> groen en de <h3> blauw. Ook deze manier van CSS zullen we niet gaan gebruiken.


3.4.3.	External CSS
De beste manier om de opmaak vast te leggen is in een apart opmaakbestand. In de head van het document wordt dan verwezen naar dat document. Het grote voordeel van een extern stijlblad is dat er maar één plaats is waar de stijldefinities gedefinieerd zijn, als je iets wilt wijzigen in de vormgeving van de site hoef je alleen het CSS bestand te bewerken en de wijziging zal zichtbaar zijn in de hele site.
In onderstaand voorbeeld bestaat er een opmaakbestand met de naam opmaak.css. Daarin is vastgelegd hoe de <h1>, <h2> en <h3> er uit moeten zien. 
Een voorbeeld hiervan zie je hieronder en dit is de manier waarmee we aan de slag gaan.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link href="opmaak.css" rel="stylesheet" type="text/css" media="all" />
    <title>XHTML en CSS</title>
  </head>
  <body>
    <h1>Dit is een h1.</h1>
    <h2>Dit is een h2.</h2>
    <h3>Dit is een h3.</h3>
  </body>
</html>

 
Het opmaakbestand opmaak.css ziet er als volgt uit. De plaats van de accolades maakt niets uit, soms worden ze op aparte regels gezet. Het is een goede gewoonte elke regel met een tab te laten inspringen.

body {
/* rand, uitvulling, achtergrond, lettertype instellen */
	margin: 0;
	padding: 0;
	background-color: #666666;
	font: small Arial, Helvetica, sans-serif;
	color: white;
}

h1	{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 48px;
	font-weight: bold;
	color: #43616B;
	text-align: center;
}

h2 	{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-weight: bold;
	color: #5C6F90;
}

h3 	{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #9C1A1E;
}



3.5.	Selectors
3.5.1.	Universal selector
Hiermee kun je alle elementen op de pagina een waarde geven. In onderstaand voorbeeld is van alle elementen de kleur van de tekst rood. De asterisk is eigenlijk overbodig, want een regel zonder selector geldt altijd voor de hele pagina.

*	{
color: red;
}

3.5.2.	Element type selector
De body, h1 en h2 en de p zijn voorbeelden van element selectors. Het is eenvoudig te begrijpen hoe je de eigenschappen kunt aanpassen in het CSS-bestand.

body	{
	color: black;
	background-color: white;
}

3.5.3.	Class selector
Een speciaal type selector is de class selector. Hiermee kun je uit de vrije hand een opmaak samenstellen en deze toekennen aan elk gewenst element. Class selectors worden in CSS aangegeven met een punt voorafgaand aan de klassenaam. In het onderstaande voorbeeld is .content een class.

.content {
position: relative; 
width: auto;
min-width: 120px;
margin: 0 210px 20px 170px;
border: 1px solid black;
background-color: white;
padding: 10px;
z-index: 3;
}

Als je een class alleen wilt toepassen op een bepaald element, dan kun je er voor kiezen de klassenaam vooraf te laten gaan door een elementnaam. Op de volgende manier worden bijvoorbeeld alleen alinea’s die het attribuut class=”belangrijk” hebben rood en vet gemaakt.

p.belangrijk {
color : red;
font-weight : bold;
}

3.5.4.	id selector
De id selector lijkt sterk op een class selector. Hij wordt voorafgegaan door een hekje (#). Een class kan aan meerdere elementen worden toegekend, maar een id mag maar aan één element op een pagina worden toegekend. Id’s worden meestal gebruikt om logische secties op een pagina te maken, zoals banners, menu’s, contentgebieden, navigatiebuttons e.d. 
De onderstaande voorbeeldpagina bestaat in werkelijkheid uit drie delen en het linker- en rechterdeel wordt bepaald door de id’s #navleft en #navright. Het middelste gedeelte van de pagina is de eigenlijke content en die wordt gevuld met instanties van de class .content. Met de id selector kunnen we een box absoluut plaatsen op een pagina. Het linkerdeel is 128px breed en staat 20px van de top. Het rechterdeel heeft een breedte van 168px en staat ook 20px van de top. De class .content heeft een rechtermarge van 210px en een linkermarge van 170px en past dus altijd binnen het linker- en rechtergedeelte, ongeacht wat de resolutie van het beeldscherm is.
 
Hieronder zie je de stijldefinitie van het linkerdeel:

#navleft {
position: absolute;
width: 128px;
top: 20px;
left: 20px;
font-size: 0.9em;
border: 1px dashed black;
background-color: white;
padding: 10px;
z-index: 2;
}

En de toepassing van dit id-element in het HTML document:

<div id="navleft">
        <h2>Links</h2>
        <p><a href=""
           title="">Lorem ipsum</a><br />
         <a href=""
           title="">Lorem ipsum</a><br />
         <a href=""
           title="">Lorem ipsum</a><br />
         <a href=""
           title="">Lorem ipsum</a><br />
         <a href=""
           title="">Lorem ipsum</a></p>
</div>

Let op de selector, omdat het een id-selector is wordt het hekje (#) gebruikt in de stijldefinitie en de id selector bij de toepassing in het HTML document.
3.5.5.	Pseudo-element selector
Er zijn drie pseudo-elements, namelijk first-letter, first-line en first-child. Een aardig voorbeeld hiervan is het drop-cap effect. Je laat elke alinea beginnen met een grote eerste letter. Let op de dubbele punt voor het pseudo-element. 

Een voorbeeld wordt hieronder getoond:

p:first-letter	{
font-face: Gothic, serif;
font-size: 250%;
float: left;
padding: 2pt;
}
 
3.5.6.	Pseudo-class selector
In CSS2 zijn de volgende pseudo-classes gedefinieerd:
:hover		Hoe ziet een element er uit als je er met de muis boven komt?
:active	 	Hoe ziet een element eruit als het actief is.
:focus	 	Hoe ziet een element eruit als het de focus heeft?
:link	 		Hoe ziet een link eruit?
:visited		Hoe ziet een bezochte link eruit?
:lang()		Hiermee kun je aangeven in welke taal een element is geschreven.

Voorbeelden:

a:link {
color: teal;
}

a:visited {
color: red;
}

a:hover {
background-color: blue;
}

3.5.7.	Descendant selector
Alle elementen zijn volgens het overervingsprincipe kinderen van een ouder (parent). Als de ouder afwijkt van het overervingsschema, kun je de descendant selector gebruiken. In onderstaand voorbeeld heeft text met em (emphasis, schuin) de lettergrootte 16px en de kleur groen, maar alleen als het een kind (child) is van de ouder li, dus alleen in opsommingen met <li>.

li em	{
	font-size: 16px;
	color: green;
}
3.5.8.	Parent-child selector
De parent-child selector is een speciaal geval van de voorgaande selector. Alleen als er sprake is van een directe relatie ouder-kind geldt dit. Als de relatie bijvoorbeeld grootouder-kleinkind is, geldt de opmaak niet. In onderstaand voorbeeld wordt alleen een kind <p> vet als het een directe nakomeling van <body> is.

body > p {
font-weight: bold;
}

3.5.9.	Adjacent selector
Als twee elementen onder elkaar staan, krijg je soms te veel of te weinig witruimte tussen de headers. Met de adjacent selector kun je aangeven wat de afstand tussen elementen moet zijn als ze pal onder elkaar staan. Je plakt de elementen aan elkaar met het + teken en legt vast wat de afstand tot elkaar moet zijn zoals in onderstaand voorbeeld van twee headers:

h1+h2	{
margin-top:	11px;
}



Opdracht:

Bestudeer het onderstaande stijlblad en beantwoord de volgende vragen. 
Is er sprake van een class selector of een id selector bij container, kopregel, kopregel_onder, hoofdsectie, inhoud en zijbalk?
Wat is het verschil tussen een class selector en een id selector?
Waar gebruik je een class selector voor en waarvoor gebruik je een id selector?
Wat voor selector wordt gebruikt bij het body element?
Worden er ook pseudo-class selectors gebruikt? Zo ja, noem deze.
Worden de hoofdsectie, de zijbalk en de voetregel absoluut of relatief gepositioneerd? Waar kun je dit uit afleiden?


/* CSS stijl */
body {
/* rand, uitvulling, achtergrond, lettertype instellen */
margin: 0;
padding: 0;
background-color: #666666;
font: small Arial, Helvetica, sans-serif;
color: white;
}
#container{
/* plaatshouder voor alle pagina-elementen */
background-color: #ffffff;
color: #000000;
margin: 30px 40px 30px 40px;
/* padding creëert  ruimte tussen de elementen en de rand van de division */
padding: 10px;
border: 1px;
}
/* division met elementen voor de kopsectie */
#kopregel{
background-color:#ffffff;
height: 1%;
}
#kopregel_onder{
border-top:solid 1px #333333;
background-color:#ffffff;
border-bottom: 1px solid #333333;
height: 1%;
}
 
#kopregel_onder a:link, #kopregel_onder a:visited{
text-decoration: none;
background-color:#ffffff;
color: #333333;
font-style:oblique;
}
#kopregel_onder h1{
color: #333333;
font-size:14px;
font-style:oblique;
font-weight: bold;
}
#hoofdsectie{
/*position: relative;
top:0;
left:  0;*/
width: 100%;
margin-top: 10px;
}
#inhoud{
/* top right bottom left, in de richting van de klok */
margin: 0 0 0 240px;
padding: 0;
border: 1px solid #000059;
background-color: #FFFFFF;
color: #000000;
}
#zijbalk{
float: left;
border: 1px solid #000059;
width: 230px;
background-color: #FFFFFF;
color: #000000;
margin: 0;
padding: 0;
}
#voetregel{
clear: both;
border: 1px solid #000059;
margin-top: 10px;

3.6.	Positionering van pagina-elementen
Bij het bepalen van de positie van de verschillende pagina-elementen is het belangrijk om enkele basisprincipes voor het definiëren van een CSS lay-out te begrijpen. Aan de orde komen: de display eigenschap, positionering en de CSS Box Model techniek.
3.6.1.	Display
De display eigenschap kan een grote invloed hebben op een pagina lay-out. Deze eigenschap bepaalt hoe een browser een element toont en afhandelt, als een blok, een inline tekstfragment of als iets anders.
 
Er zijn 17 mogelijke waarden, de volgende zes worden veel gebruikt:
•	block
•	inline
•	list-item
•	none
•	table-footer-group
•	table-header-group

De standaard waarde wisselt van element tot element. Block elementen als p, h1, div hebben als standaard waarde block, inline elementen (binnen een deel van een tekst) als strong, span, etc. hebben standaard inline als waarde.
Het toewijzen van niet-standaard waarden aan elementen kan nuttige effecten tot gevolg hebben.
Als je none als waarde kiest, zal het element niet getoond worden, de ruimte die het element zou innemen wordt vrijgegeven. Dit in tegenstelling tot de eigenschap visibility: hidden. Hierbij wordt het element wel verborgen maar blijft de ruimte voor het element bezet. 
Een voorbeeld van display zag je in het bovenstaande stijlblad:

#kop-beneden li {
display: inline;
background-color: #ffffff;
color: #050845;
}


Opdracht:

Zoek op bijvoorbeeld www.handleidinghtml.nl de beschrijving van de display eigenschap en de zes genoemde waarden op, noteer de waarden en de betekenis van deze waarden. Maak een webpagina met zes voorbeelden waarbij de verschillende waarden zijn toegepast. 

 
3.6.2.	Het Box Model

Bij CSS wordt vaak gesproken over het Box Model. Elk element zit opgesloten in een box. Het basis CSS Box Model ziet er als volgt uit:

























Kijk goed naar wat het verschil is tussen de padding en de margin. Padding is de ruimte tussen het element en de (wel of niet getoonde rand (grens). De marge is de ruimte tussen de rand en een volgend element.

Bij margin en padding kun je vier verschillende maten opgeven, waarbij je begint bij de top en met de wijzers van de klok meegaat. Een ezelsbruggetje dat hiervoor vaak gebruikt wordt is TRBL (trouble). Een padding van 15px 20px 30px 25px wil dus zeggen dat de top-padding 15 pixels bedraagt, de right-padding 20 pixels, de bottom-padding 30 pixels en de left-padding 25 pixels. Met padding: 15 px 25 px geef je aan dat de boven- en onderkant een padding hebben van 15 pixels en de linker- en rechterkant 25 pixels. Met padding: 20px bepaal je dat de padding aan alle kanten 20 pixels bedraagt.


Opdracht:

Bestudeer de onderstaande code en het voorbeeld in de browser. Padding en margin zijn hier toegepast. Ga na welk invloed margin en padding hebben op h1.
Staan de zichtbare breedte en breedte van de inhoud hier vast of zijn ze afhankelijk van de grootte van het browservenster? Verklaar je antwoord.

 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>Box Model Demo</title>
    <style type="text/css">
      h1 {
	    border: solid #FF0000 medium;
          background-color:#FFFF99;
	    text-align:center;
          color:#0066FF;
          padding-left: 25px;
          padding-top: 30px; 
          padding-bottom: 30px;
          padding-right: 25px;
	    margin: 100px;
      }
    </style>
</head>
<body>
    <h1>Help! Ik zit vast in een box model!</h1>
</body>
</html>


3.6.3.	Padding, margin en border
 
Padding
We nemen eerst padding onder de loep. Dit doen we aan de hand van een h1 element dat we eerst zonder padding, margin of rand bekijken:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Boxmodel 1</title>
<style type="text/css">
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color:#000000;
	background-color: #FF0000;
}
</style>
</head>

<body>
<h1>Kopregel zonder padding en margin</h1>
</body>
</html>

De CSS regels zijn hier voor het overzicht in het HTML document geplaatst. De CSS regels zullen hieronder steeds wat aangepast worden, alleen die wijzigingen zullen getoond worden.

Padding kent vier eigenschappen: padding-left, padding-right, padding-top en padding-bottom. De padding kan met verschillende eenheden worden ingesteld en ook absoluut of relatief. Pixels worden het vaakst toegepast, als je een ontwerp wilt maken dat gebruikt maakt van het hele scherm, gebruik dan percentages in plaats van pixels. De padding wordt dan aan het formaat van het venster aangepast.
Als we de padding als volgt aanpassen: padding-left: 50 px, dan zal de tekst verderop beginnen:

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color:#000000;
	background-color: #FF0000;
	padding-left:50px;
}
 








Verdere wijzigingen in de padding:

	padding-top: 25px;
	padding-right: 55px;
	padding-bottom: 75px; 
padding-left: 50px;

Je kunt bovenstaande code als volgt kort coderen:

	padding: 25px, 55px, 75px, 50px;

Je kent het ezelsbruggetje wel: lees met de klok mee: boven, rechts, onder, links. In het Engels: top, right, bottom en left. Het is in dezelfde volgorde als in het woord trouble.



Opdracht:

Neem de HTML en CSS code over en ga na onder welke omstandigheden de padding-right werkt. Van welke factor is het afhankelijk of het effect van padding-right zichtbaar is?


Je kunt padding op de volgende manieren gebruiken:

Aantal waarden	Resultaat
1	Alle vier waarden worden met deze waarde ingesteld.
2	Top en bottom worden volgens de eerste waarde ingesteld, left en right volgens de tweede.
3	Top wordt volgens de eerste waarde ingesteld, links en rechts volgens de tweede, bottom volgens de derde waarde.
4	Top volgens de eerste, rechts volgens de tweede,  onder volgens de derde, links volgens de vierde waarde.


Opdracht:

Neem de HTML en CSS code over experimenteer met de vier mogelijkheden voor het instellen van de padding.

Margin
Het verschil tussen padding en margin is dat padding binnen de grenzen van het element is terwijl margin zich buiten de grenzen van het element beweegt.

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color:#000000;
	background-color: #FF0000;
	margin-left:50px;
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color:#000000;
	background-color: #00FF00;
	margin-left:50%;
}



Deze code zorgt er voor dat het element, inclusief de achtergrond en tekst naar rechts wordt verschoven. Bij padding echter verschoof alleen de tekst binnen het element naar rechts.

Net zoals bij de padding eigenschap kun je ook bij margin de code verkort noteren waarbij dezelfde regels gelden als bij padding, zie daarvoor de tabel over padding.

Border
Border heeft drie eigenschappen: style, width en color. De style eigenschap van border is standaard none, dat wil zeggen; er wordt geen rand getoond. De breedte is standaard medium. De kleur is gelijk aan de tekstkleur van het element.

De style eigenschap kent de volgende mogelijkheden: none, solid, dashed, dotted, dot-dash, dot-dot-dash, wave, double, groove, ridge, inset, outset, hidden en none. Hidden lijkt op none maar werkt in combinatie met tabellen op een andere wijze. Daar gaan we hier niet verder op in.

De breedte van een rand kan via vier verschillende declaraties (border-top-width, border-right-width, border-bottom-width en border-left width) worden gegeven of kort met border-width worden genoteerd.  De mogelijke waarden kunnen absoluut of relatief zijn (bijvoorbeeld px, ems, percentage) en kunnen ook een beschrijvende waarde zijn (thin, medium, thick).

De kleur kan aangegeven worden in een RGB waarde (100, 10, 1), als standaardkleurwaarde  (red) of als een hexidecimale RGB (#ff9900).

De border eigenschap kan kort gedefinieerd worden in de volgorde style, width en color.

Voorbeeld van een kort genoteerde regel:

.waarschuwing {
    border: 3p solid red
}


Opdracht:

Experimenteer met de mogelijkheden voor het instellen van de padding, margin en border van drie elementen op een pagina.

 
3.6.4.	Positionering, absoluut en relatief
De CSS position eigenschap bepaalt hoe een element (in dit geval een block-element) wordt gepositioneerd op de pagina. De twee meest gebruikte waarden zijn: relative en absolute. Static is de standaard waarde voor deze eigenschap. De vierde waarde (fixed) wordt niet ondersteund door MS Internet Explorer 6.

Positionering door middel van CSS kan verwarrend zijn. Er is geen stelsel van absolute coördinaten dat je kunt gebruiken voor het plaatsen van elementen, ook niet als je absolute gebruikt. De plaatsing van een element is afhankelijk van het element waar in deze geplaatst wordt. Binnen dat element wordt een element geplaatst ten opzichte van de linker bovenhoek (de oorsprong is daar 0,0). De positie van een element wordt dan ook berekend ten opzichte van het element waar binnen het geplaatst is, de ‘positioning context’.

Voorbeeld: de inline stijldefinitie van de twee divisions hieronder levert het volgende resultaat op:

  <body>
    <div style="position: absolute; left: 125px; top: 75px;" 	class="big">
	  Dit is de eerste gepositioneerde regel.
      <div style="position: absolute; left: 25px; top: 30px;">
		<span style="position: relative; left: 10px; top: 30px;" 		>Dit is een voorbeeld van een tweede regel.</span> 
     </div>
    </div>
  </body>




De tweede regel springt een stukje in ten opzichte van de eerste regel (25 pixels). Dit komt doordat de eerste regel de context bepaalt voor de positionering. Het is het bovenliggende (parent) element voor de tweede regel. Beide regels zijn absoluut gepositioneerd. De eerste regel is gepositioneerd ten opzichte van de linkerbovenhoek van het browserscherm, de tweede is gepositioneerd ten opzichte van de eerste regel.

3.6.5.	Float en clear
Met de float eigenschap kan een element zwevend worden gemaakt. Je zorgt er hiermee voor dat een element als het ware zweeft op de pagina, de rest van de inhoud sluit er rondom op aan. Float is naast absolute positionering de enige manier om elementen te plaatsen waar je wilt. 

Wetenswaardigheden:
•	Block-elementen zoals p, table en h2 worden gewoonlijk onder elkaar geplaatst. Met float (zweven) kunnen we block-elementen naast elkaar plaatsen. 
•	Je kunt ieder element zwevend maken, het element wordt dan altijd een block element. 
•	Bij float moet de breedte en de hoogte van het element worden opgegeven.
•	Het zwevend gemaakte element wordt uit de normale HTML document structuur gehaald maar dit gebeurt altijd na het voorgaande element.
•	Tekst zal altijd rond een zwevend element vloeien.
•	Zwevende elementen zullen een afbeelding of tekst niet afdekken, absoluut gepositioneerde elementen kunnen dat wel.
•	Twee opeenvolgende zwevende elementen (float: left of right) zullen langs elkaar komen te liggen zolang de totale breedte de breedte van het omvattende element (het element waar de twee opeenvolgende zwevende elementen in geplaatst zijn) niet overschrijdt.
•	Een element met float: left doe je teniet met clear: left, een element met float : left met clear: right;
•	Voorgaande zwevende elementen met float: left en float: right doe je teniet met clear: both.

De combinatie van float en clear gaan we bij de voorbeeld lay-outs gebruiken om een pagina in te delen. De combinatie is belangrijk bij het vormgeven van sites die in bijvoorbeeld Explorer, Firefox en Safari weergegeven worden.

Tussendoor: de ‘natuurlijke flow’ van een pagina.
Het is goed te realiseren dat een web pagina een vastgestelde hiërarchie kent. Elementen op een pagina hebben allemaal hun eigen plaats. Die plaats hangt af van de eigenschappen van het element en van de plaats waar jij ze in de html hebt geplaatst. 
Met de natuurlijke flow van een web pagina wordt de manier bedoeld waarop een pagina verwerkt wordt.
Je beïnvloedt met behulp van CSS de gang van zaken bij het verwerken van de pagina: 
Je gaat m.a.w. de natuurlijke flow van de pagina beïnvloeden. In feite wordt een element dat de eigenschap float krijgt als het ware boven de flow van de pagina uitgetild. 

De float eigenschap is een veel gebruikte CSS eigenschap. Float kent maar drie waarden: left, right en none.
Float (left of right) drukt het element uit zijn natuurlijke positie en verschuift het naar links of naar rechts.
Float vervangt de align eigenschap van het img element en heeft precies hetzelfde effect. Er is een voordeel van float ten opzichte van align: float kan ook voor andere elementen worden gebruikt. 
Bij het onderstaande voorbeeld wordt de afbeelding naar links verplaatst door de eigenschap float met als waarde left te gebruiken. De tekst wordt daardoor rechts geplaatst.



Bij het bovenstaande voorbeeld wordt de afbeelding naar rechts verplaatst door de eigenschap float met als waarde rechts te gebruiken. De tekst wordt daardoor links geplaatst.

Er is bij de stijldefinitie van het img element ook gebruik gemaakt van respectievelijk margin-right en margin-left om een afstand van 5 pixels te maken tussen de tekst en de afbeelding.
 
h1 	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color:#000000;
	background-color: #FFFF66;
	margin-left:50px;
	margin-right: 100px;
}
p 	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color:#000000;
	background-color: #FFFF66;
	margin-left:50px;
	margin-right: 100px;
}
.data {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: red;
	background-color: #ffffff;
	margin-left:50px;
	margin-right: 100px;
}
img 	{
	float: left;
	margin-right: 5px;
}

<body>
<h1>Schilderbeurt voor Watertoren</h1>
<span class="data">nieuwsbericht, 16 augustus 2006</span>
<p><img src="images/watertoren.jpg" alt="Watertoren" width="206" height="121" />De Watertoren in Heemstede is aan een schilderbeurt toe. De steigers zijn ... enzovoort</p>
</body>


Als je de eigenschap float niet gebruikt, ziet het resultaat er als hiernaast uit!










De eigenschap float kun je op elk blokelement toepassen, hieronder zie je een voorbeeld waarbij de foto verwijderd is en er een kopregel in de tekst is geplaatst.

 


.p_kop {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 36px;
	float: left;
	font-weight: bold;
	margin-right: 10px;
	margin-top: 10px;
}


<p><span class="p_kop">Watertoren</span> in Heemstede is aan een schilderbeurt
  toe. De steigers zijn al geplaatst … enzovoort</p>


Met de clear eigenschap wordt aangegeven of er links en/of rechts van het element wel of geen zwevende elementen mogen voorkomen.

De mogelijke waarden zijn none, left, right en both.

De beginwaarde none van de clear eigenschap bepaalt dat zwevende elementen wel zijn toegestaan naast het element waaraan de eigenschap wordt toegevoegd. Er mogen dan ook wél zwevende elementen naast het element komen staan.

clear: left 	geeft aan dat aan de linkerkant geen zwevende elementen mogen staan
clear: right 	geeft aan dat aan de rechterkant geen zwevende elementen mogen staan
clear: both 	geeft aan dat er géén elementen naast het element mogen staan

3.6.6.	Float en clear in de praktijk
In het onderstaande ontwerp wordt clear gebruikt om er voor te zorgen dat de lay-out in de browser wordt getoond zoals deze bedoeld is.

Het ontwerp bestaat uit een kopregel, drie kolommen en een voetregel.



De pagina zou zonder een gekoppeld stijlblad als volgt in de browser weergegeven worden:


De bovenstaande weergave illustreert het gegeven dat met CSS de ‘natuurlijke flow’ kan worden beïnvloed. Kijk eens naar de volgorde waarin de elementen in de bovenstaande webpagina worden getoond, vergelijk dit met de HTML code en kijk daarna nog eens naar de weergave mét het stijlblad.

 
<body>
<div id="container">

  		<div id="kop">
    			<p>Kop</p>
  		</div>
  		
	<div id="hoofd">

			<div id="zijbalk">
      			<p>Eerste zijbalk</p>
    			</div>

			<div id="zijbalk2">
      			<p>Tweede zijbalk</p>
    			</div>

			<div id="inhoud">
      			<p>Inhoud</p>
    			</div>

		</div>
  		
		<div id="voetregel">
    			<p>Voetregel</p>
  		</div>

</div>
</body> 

 

body	{
margin: 0;
  	padding: 0;
  	font: small Helvetica, Arial, sans-serif;
  	font-weight: bold;
}
#container{
background-color: #ffffff;
color: #000000;
margin: 30px 40px 30px 40px;
padding: 10px;
border: 1px;
}
#kop {
  	margin: 0;
  	padding: 0;
  	border: 1px solid black;
}
#hoofd {
  	margin-top: 10px;
}
#zijbalk {
  	float: right;
  	width: 220px;
  	border: 1px solid black;
  	background-color:#666666;
  	color: white;
}
#zijbalk2 {
  	float: left;
  	width: 159px;
  	border: 1px solid black;
  	background-color:#D4D4D4;
  	color: black;
}
#inhoud {
  	border: 1px solid black;
  	background-color:#9E9E9E;
  	margin: 0 240px 0 160px;
}
#voetregel {
  	clear: both;
  	border: 1px solid black;
  	background-color: #464646;
  	color: white;
}

Zoals je inmiddels weet: float zorgt er voor dat de zwevende elementen uit de natuurlijke positie wordt gedwongen. Niet-zwevende elementen zullen rond de zwevende elementen vloeien. De linker- en rechter zijbalken worden naar links en rechts gedwongen, de inhoud division willen we niet om de zijbalken laten vloeien, vandaar dat hierbij brede marges worden ingesteld om er voor te zorgen dat de vulling van de inhoud division in ongeveer het midden van de pagina geplaatst wordt. De clear: both waarde bij de voetregel zorgt er voor dat de voetregel altijd beneden de inhoud en de zijbalken getoond zal worden. Both geeft in dit geval de linker- en rechterbalk vrij. De voetregel komt na de inhoud div, binnen de natuurlijke loop van het document.
Opdracht:

Neem bovenstaande HTML en CSS code over en experimenteer met de margin eigenschap om de verdeling van de zijbalken en de inhoud op verschillende manieren in te stellen. Zorg er voor dat bij een van je experimenten de breedte van de beide zijbalken even groot is. Experimenteer ook met de padding eigenschap van de zijbalken en de inhoud division. Bestudeer het effect van padding op de positie van de inhoud van de kolommen en kop- en voetregel.


Je zult merken dat het ook mogelijk is om de breedte van de kolommen zo in te stellen dat de lay-out verminkt raakt. Een kwestie van eenvoudig rekenen en een te smal browser-venster. Houd rekening met de breedte van de browser van de bezoeker. Je mag er van uitgaan dat de bezoeker een beeldscherm gebruikt met een breedte van tenminste 800 pixels en een hoogte van tenminste 600 pixels.



Nu je gezien hebt hoe float en clear gebruikt kunnen worden om een meer-kolommen lay-out te realiseren zou je een basisontwerp voor een lay-out kunnen maken. Om dit basisontwerp gezicht te kunnen geven moet je meer weten van de opmaakmogelijkheden met gebruik van CSS. We gaan dan ook eerst aandacht geven aan het gebruik van lettertypen.
3.7.	Fonts 
Je kunt er nooit vanuit gaan dat een bepaald font op een systeem geïnstalleerd zal staan. Er is bijvoorbeeld geen enkel font dat standaard zowel op een Macintosh als op een Windows systeem staat. Er zijn echter wel verschillende fonts die op elkaar lijken en daarom wordt er meestal een aantal fonts meegegeven in de font-family. Hieronder schematisch welke fonts bij welk systeem horen en of ze wel of niet standaard geïnstalleerd zijn.
 

Windows
Macintosh	Standaard geïnstalleerd
Courier New	Courier	ja
Arial	Helvetica (of Geneva)	ja
Times New Roman	Times (of New York)	ja
Arial Black	Arial Black	nee
Comic Sans MS	Comic Sans MS	nee
Trebuchet MS	Trebuchet MS	nee
Verdana	Verdana	nee

3.7.1.	De font-family eigenschap
Je kunt het lettertype voor een element als een verzameling van fonts geven door middel van de font-family eigenschap. De leden van een font familie hebben – net als bij een echte familie - zaken gemeenschappelijk.
Een schreefloos lettertype is heel geschikt voor het gebruik op een beeldscherm. Schreven zijn de kleine zijstreepjes aan de letters van fonts zoals Times New Roman. Bij lage resolutie worden lettertypen met schreven op een beeldscherm wat onscherp of gekarteld. Voor weergave op een beeldscherm hebben schreefloze lettertypen daarom de voorkeur. Schreefloze lettertypen geven we aan met de term sans-serif, dat is Frans voor “zonder schreef”. 

R
	R

Times New Roman	Arial
(met schreef)	(schreefloos)
(serif)
	(sans-serif)

De hieronder gegeven fonts zijn allemaal zonder schreef.

h1	{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

In ons geval wordt dus gezocht in de volgorde Verdana, Arial, Helvetica. Als geen van alle gevonden wordt, dan wordt in ieder geval een generiek sans-serif (schreefloos) lettertype gebruikt. Andere generieke lettertypes die je op kunt geven zijn serif, monospace, cursive en fantasy. Bij fantasy zijn de resultaten onvoorspelbaar en dat lettertype kun je beter niet gebruiken.
3.7.2.	De font-size eigenschap
Het instellen van de lettergrootte voor een webpagina is problematisch omdat browsers op verschillende manieren het formaat van letters afhandelen. De aanduidingen voor het bepalen van de grootte van een lettertype voor een webpagina zijn de volgende:
xx-small, x-small, small, medium, large, x-large en xx-large
Deze absolute sleutelwoorden definiëren niet een exacte grootte in punten of pixels die in elke situatie en voor elke browser en elk lettertype gelijk is. Ze verwijzen echter naar een tabel met lettergroottes die door de browser berekend wordt en per lettertype kan verschillen. Deze definitie is niet zo absoluut als het op het eerste gezicht lijkt. Je kunt absolute waarden voor de lettergrootte ook in eenheden als pixels of points uitdrukken.

De wijze waarop absoluut opgegeven lettergrootten worden weergegeven door de verschillende browsers verschilt helaas. Het is onvermijdelijk dat het ontwerp er in de ene browser wat anders uit zal zien dan in de ander.

Je kunt de grootte van het lettertype ook uitdrukken in relatieve eenheden. Dit kunnen percentages zijn, ems of de relatieve sleutelwoorden larger en smaller.
3.7.3.	Hoe meten we?
Je hebt al gezien dat je met verschillende waarden kunt meten. Als iets 0 is, hoef je uiteraard niet op te geven met welke maat je meet. Maar de volgende voorbeelden zullen allemaal hetzelfde resultaat opleveren:

font-size: 1in;
font-size: 2.54cm;
font-size: 24.4mm;
font-size: 72pt;
font-size: 6pc;

Een overzicht van de maten:

Afkorting	Betekenis	Uitleg
in	inch	2.54 cm
cm	centimeter	
mm	millimeter	
pt	point	1/72 inch
pc	pica	12 point (1/6 inch)
px	pixel	één puntje van je scherm

Dit zijn absolute maten. Er is ook nog de mogelijkheid een relatieve maat op te geven met em. Als je bijvoorbeeld line-height: 1.1em gebruikt, dan betekent dit dat je vanaf dat moment de regelhoogte met 1.1 van het huidige font moet vermenigvuldigen. Of stel dat je een marge instelt van 1em, dan betekent dit dat er een witruimte komt ter grootte van de font-size die daar ingesteld is. De term em is oorspronkelijk de breedte of hoogte van de hoofdletter M in het huidige font.
Het gebruik van een relatieve maat maakt het voor de gebruiker mogelijk om de weergave van de pagina op het beeldscherm zelf in te stellen. Dat is van belang voor mensen met een verminderd zichtvermogen. Het toepassen van relatieve maten verhoogt dan ook de bruikbaarheid en toegankelijkheid van de site en heeft de voorkeur.

3.7.4.	De font-style eigenschap
De font-style eigenschap kun je gebruiken om te bepalen of de tekst normaal, cursief of schuin naar rechts hellend moet worden weergegeven. De waarde voor de laatste twee mogelijkheden is italic respectievelijk oblique. Bij schreefloze lettertypen (sans-serif) zijn italic en oblique over het algemeen hetzelfde. Bij lettertypen met schreef (serif) kan er verschil tussen zitten en wordt oblique wel gezien als een schuin geplaatste normale letter. In de praktijk blijkt de weergave door browsers van de waarden italic en oblique echter hetzelfde te zijn. Een voorbeeldje uit een CSS regel:

font-style: italic;

3.7.5.	De font-weight eigenschap
Weight geeft de ‘vetheid’ van de lettertekens aan. Weight kan een relatieve waarde krijgen: bolder en lighter, absolute waarden variëren van 100 tot 900 (het vetst). De stappen worden per honderd gedaan (100, 200, … 900). Je kunt hier ook de absolute waarde normal (gelijk aan 400) of bold (700) gebruiken. De ervaring leert dat je deze eigenschap beter niet kunt toepassen omdat de meeste browsers er weinig of niets mee doen.
3.7.6.	De font shorthand eigenschap
Met de shorthand eigenschap kun je op verkorte wijze alle eigenschappen van de font declaratie in de CSS regel plaatsen, bijvoorbeeld:

h3	{ 
  	font: bold italic 13px Arial, “Lucida Console”, sans-serif; 
}

Neem altijd de font-size en de font-family op in een dergelijke definitie. De volgorde is belangrijk! De grootte en de familie komen achteraan en ook in die volgorde, dus eerst de grootte en dan de famlie. Als je een lettertype hebt dat uit meerdere woorden bestaat, is het verstandig dat lettertype tussen quotes te plaatsen.

3.7.7.	De font variant eigenschap
Deze eigenschap kent maar één effect: small-caps, dit zijn kleine hoofdletters, voorbeeld: KLEIN KAPITAAL.

3.8.	Teksteffecten
In deze paragraaf worden enkele toepassingen van teksteffecten besproken.
3.8.1.	Tekstuitlijning
Goed ontwerp bevat naast positieve ruimte (bezette ruimte) ook negatieve ruimte (lege ruimte). Bij een goed ontwerp is er een afweging tussen positieve en negatieve ruimte (gebruikte en ongebruikte ruimte). Je kunt op een webpagina negatieve ruimte maken door middel van het uitlijnen van de tekst. Met CSS heb je vier mogelijkheden om de tekst uit te lijnen: left, center, right en justify. De laatste eigenschap zorgt er voor dat de tekst uitgevuld wordt. Met gebruik van deze eigenschappen kun je van een te volle pagina een pagina met lucht en ruimte maken.

h1 {
  text-align: center;
}
h2 { 
  text-align: right;
} 

De uitlijning kan een groot verschil maken, vergelijk de onderstaande tekstblokken eens:

 
















 
Lorep Ipsum is een bekende Latijnse tekst die door websitemakers vaak gebruikt wordt als vulling voor een website. De kijker wordt niet afgeleid door de inhoud van de website. Op www.lipsum.com kun je een gewenst aantal paragrafen genereren en die knippen en plakken.

Je kunt met behulp van CSS de eerste regel van een paragraaf ook laten inspringen. De mate van inspringen kan opgegeven worden:

p {
  text-indent: 3em;
}

3.8.2.	Pseudo-element selectors
In CSS worden stijlen normaal gedefinieerd voor een element. Soms is het echter wenselijk effecten te bereiken, die niet mogelijk zijn als je alleen beschikt over element- of attribuut-selectors. Bijvoorbeeld het in een bepaalde opmaak weergeven van de eerste letter of de eerste regel van de inhoud van een element. Om dat soort effecten mogelijk te maken, zijn pseudo-elementen geïntroduceerd. Een pseudo-element kun je zien als een denkbeeldig element, dat weliswaar niet in het document voorkomt, maar waarvoor je wel een stijl kunt definiëren.

CSS 2.1 kent een viertal pseudo-element selectors:
first-line:	de eerste regel van een element wordt in een andere stijl weergegeven
first-letter:	de eerste letter van een element wordt in een andere stijl weergegeven (in de typografie  ook wel bekend als initial caps of drop caps)
before:	direct voor een element wordt extra inhoud toegevoegd
after:		direct na een element wordt extra inhoud toegevoegd

De opbouw van een stijlregel met een pseudo-element selector is:

element: first-line { stijldeclaratie }

Voorbeelden:

p            { font-weight: normal; }
p:first-line { font-weight: bold; }

p              { font-weight: normal; }
p:first-letter { font-size: 250%; font-weight: bold; }

 

Bron: www.handleidinghtml.nl
3.8.3.	Het opmaken van hyperlinks
Hyperlinks vormen speciale tekstelementen op een webpagina. Links zijn actieve elementen. Je kunt de volgende vier pseudoklassen gebruiken om het uiterlijk van de hyperlinks naar eigen smaak op te maken:

link:	legt de stijl van een hyperlink vast die nog niet bezocht is; 
visited:	legt de stijl van een hyperlink vast die al bezocht is; 
active:	bepaalt de stijl van een hyperlink op het moment dat de gebruiker deze activeert door erop te klikken; 
hover:	bepaalt de stijl van een element op het moment dat de gebruiker er met de muisaanwijzer boven komt of er weer vanaf gaat; 

Voorbeeldcode:

a:link             { color: blue; background-color: yellow; }
a:visited          { color: black; background-color: yellow; }
a:active           { color: yellow; background-color: red; }
a:hover            { color: red; background-color: blue; }

Zie verder: www.handleidinghtml.nl

3.8.4.	Kleur
Er zijn verschillende manieren om kleuren vast te leggen. In onderstaand voorbeeld is blauw gemaakt op verschillende manieren.

color : blue;
color : AppWorkspace;
color : rgb(0, 0, 255);
color : rgb(0%, 0%, 100%);
color : #0000ff;
color : #00f;

h1	{
	color: #0000ff;
}

 
Je kunt kleuren vast leggen door middel van:
1.	Beschrijvende kleurnamen
2.	Systeemkleurnamen
3.	RGB decimale kleurwaarden
4.	RGB percentage waarden
5.	Hexadecimale kleurwaarden
6.	Hexadecimale kleurwaarden (afgekort)

1.	Er zijn 17 officiële beschrijvende kleurnamen die door HTML en CSS ondersteund worden. Momenteel worden door de meeste browsers 140 beschrijvende kleurnamen ondersteund. De 17 officiële namen zijn: black, white, aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal en yellow. De andere 133 namen worden niet door W3C ondersteund. Door de kleurnamen te gebruiken heb je vooraf een aardig idee van hoe de kleur er uit zal zien.

2.	Er zijn 28 systeemkleurnamen. Deze kleurnamen komen overeen met kleurnamen die door het besturingssysteem worden gebruikt. De kleurnamen zijn specifiek voor het bedoelde besturingssysteem. Je kunt deze kleurnamen gebruiken om web interfaces te maken die overeen komen met het besturingssysteem van de gebruiker. Zie http://w3.org/TR/CSS21/ui.html voor een overzicht van de kleurnamen (system colors).

3.	Kleuren die op een computerscherm worden getoond worden samengesteld uit drie basiskleuren, rood, groen en blauw. Deze drie kleuren kunnen gemengd worden tot een bijna eindeloze reeks kleurschakeringen. De RGB functie kan gebruikt worden door voor iedere kleur een waarde op te geven, gescheiden door een komma (van 0 tot en met 255).

4.	Je kunt de RGB kleurwaarden ook in percentages opgeven.

5.	De hexadecimale notatiewijze loopt van zwart (#000000) tot wit (#ffffff). De eerste twee tekens achter # staan voor rood, de tweede voor groen, de derde voor blauw.
#0000ff staat voor géén rood, géén blauw, maximaal blauw. De hexadecimale notatie geeft de grootste controle over de kleurspecificatie, webdesigners zullen deze notatiewijze het liefst gebruiken. Als je echter snel een eenvoudige site wilt maken kies je wellicht liever voor de beschrijvende kleurnamen.

6.	De afkorting kan alleen gebruikt worden wanneer de hexadecimale cijfers per paar gelijk zijn (#0000ff = #00f).

3.8.5.	Het gebruik van kleuren bij het ontwerp van een 	website

Het kiezen van een combinatie van kleuren die goed werken is een vak apart. Vooral het gebruik van kleur van de tekst in combinatie met een gekleurde achtergrond kan de leesbaarheid van de tekst bemoeilijken. Kies daarvoor in beginsel kleurenparen die complementair zijn aan elkaar. Je kunt daarvoor een kleurenwiel gebruiken. 

Je kunt het kleurenwiel ook gebruiken om kleuren te zoeken die goed bij elkaar passen. Dit doe je door kleurcombinaties voor de vormgeving van de site te kiezen die dicht bij elkaar liggen. Kies twee of drie bij elkaar liggende kleuren en gebruik deze voor grote gebieden als achtergronden en bijvoorbeeld menu’s. Zo kun je zorgen voor een mooie site met esthetische effecten.
Houdt bij het kiezen van kleuren ook rekening met bezoekers die kleurenblind zijn. 

Tip: Kijk op www.color-wheel-pro. Daar vind je een programma met een handig kleurenwiel en met informatie over kleurentheorie en kleurenschema’s.

.   

Color Wheel Pro met een complementair kleurenschema en het helpbestand (kleurentheorie)

Het kiezen van een geschikte kleurencombinatie (denk bijvoorbeeld aan tekst boven een gekleurde achtergrond) kan lastig zijn. Probeer verschillende combinaties uit. Dit kost tijd maar is de moeite waard. Je kunt hulp zoeken op het internet. Gebruik bijvoorbeeld Pixy’s Color Scheme Generator. Dit programma bevat ook een lijst van verschillende soorten kleurenblindheid. Je kunt zien hoe jouw schema er uit ziet voor bezoekers van je website die een bepaalde soort kleurenblindheid hebben. Zorg er ook voor dat – naast onbruikbaarheid van de site door verkeerde kleurencombinaties – de site niet alleen begrepen kan worden door de kleurencombinaties. Zorg er voor dat er naast gekleurde knoppen of afbeeldingen ook tekstuele informatie is. 

 

Het zoeken naar een geschikt en fraai kleurenschema voor je site is een leuk en creatief proces. Zoek naar nieuwe combinaties, laat je niet uitsluitend leiden door dat wat gebruikelijk is.
3.8.6.	De kleur van de body instellen
Je kunt de kleur van de body tekst door middel van een extern stijlblad instellen met:

body {
   	color: red;
}

Een betere manier is:

body {
   	color: white;
   	background-color: maroon
}

Verklaring: als je een voorgrondkleur (body tekst) instelt, stel dan ook een achtergrond kleur in. Je weet immers niet of de bezoeker de browser zo heeft ingesteld dat er een andere standaard achtergrond kleur getoond wordt, door via het stijlblad de achtergrondkleur in te stellen, voorkom je dat je pagina er mogelijk niet goed uit ziet. 

   

Kleuren instellen in Microsoft Explorer 7 (links) en Firefox (rechts)

Bedenk dat de ingestelde voorgrondkleur ook gebruikt gaat worden voor andere tekstelementen als kopregels, paragrafen en lijsten, tenzij je de kleuren voor deze elementen door middel van een CSS definitie zelf instelt.
3.8.7.	Transparantie en kleuren
Je kunt ervoor zorgen dat de achtergrondkleur van elk HTML element dezelfde is als de achtergrondkleur van de body. Dit doe je door de achtergrondkleur van het HTML element als transparant in te stellen:
#transparanteRechthoek {
  	color: white;
  	background-color: transparant;
}

3.8.8.	Wetenswaardigheden over kleur en 	achtergrondafbeeldingen
Je kunt op een webpagina de aandacht van de bezoeker voor bepaalde secties op de pagina trekken door middel van kleur. Je kunt in je stijlblad klasse definities opnemen als: .waarschuwing of .gevaar. Een dergelijke klasse definieert een achtergrondkleur, lettertype en voorgrondkleur en eventueel een kader, zo gekozen dat de aandacht van de bezoeker getrokken wordt.

.gevaar {
  	font-size: 1.3em;
  	text-align: center;
  	background-color: red;
  	font-weight: bold;
  	color: white;
  	border: 2px solid black;
}

Je kunt rijen in een tabel afwisselende kleuren geven om de leesbaarheid en aantrekkelijkheid van de tabel te bevorderen. 

In de stijldefinitie neem je op:

.even {
	background-color: lightgrey;
}
.oneven {
	background-color: yellow;}

En in de html code:

<table>
  <tr class =”oneven”>
      <td> rij 1, cel 1</td>
      <td> rij 1, cel 2</td>
      <td> rij 1, cel 1</td>
   </tr>
   <tr class =”even”>
      <td> rij 2, cel 1</td>
      <td> rij 2, cel 2</td>
      <td> rij 2, cel 1</td>
    </tr>
    <tr class =”oneven”>
       <td> rij 3, cel 1</td>
       <td> rij 3, cel 2</td>
       <td> rij 3, cel 1</td>
    </tr><table>
Als je een achtergrond afbeelding voor de body gebruikt, stel dan ook een achtergrondkleur in. Als de pagina geladen wordt, zal eerst de achtergrondkleur getoond worden, daarna de afbeelding.
De achtergrondafbeelding zal zich (standaard effect) horizontaal en verticaal herhalen.
Je kunt met CSS er ook voor zorgen dat de afbeelding zich niet herhaalt. Je kunt er ook voor zorgen dat de achtergrondafbeelding op een vaste plaats blijft, ook tijdens het scrollen. De tekst zal dan over de afbeelding heen schuiven bij het scrollen.

CSS:

body {
  	background-color: white;
  	color: red;
  	background-image: url(plaatje.jpg);
  	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-position: left top;
}

Je kunt background-repeat ook zó instellen:

•	repeat-x: de afbeelding zal horizontaal herhaald worden.
•	repeat-y: de afbeelding zal verticaal herhaald worden.

De background-position gebruikt twee waarden: de eerste voor de horizontale positie, de tweede voor de verticale positie. De mogelijke waarden zijn: left, right, center en top, center en bottom. Je kunt ook een percentage gebruiken voor elk van deze waarden, bijvoorbeeld:

background-position: 50% 50%;


 
4.	CSS lay-outs
4.1.	Twee kolommen voorbeeld lay-out met CSS
De indeling van de webpagina zal bestaan uit een middelgebied met twee kolommen met daarboven een kopregel en daaronder een voetregel. Het geheel krijgt een zekere afstand ten opzichte van de randen van het browservenster.











Het resultaat moet correct worden getoond in Firefox, daarna wordt het ontwerp – indien nodig – aangepast om ook correct te werken in Explorer 6 en 7 en Safari. Firefox voldoet meer aan de eisen die gesteld worden aan een voor CSS2 geschikte browser, daarom wordt het ontwerp het liefst eerst in Firefox getest.
4.2.	Voorbereiding
Maak een stijlblad en sla deze op als stijl.css in de map ‘stijl’. Koppel dit stijlblad aan het HTML document met:

<head>
	<link href=”stijl/stijl.css” rel=”stylesheet” type=”text/css” />
</head>
4.3.	Stap 1: body eigenschappen instellen in het 	stijlblad

body {
/* rand, achtergrond, lettertype instellen */
	margin: 0;
	padding: 0;
	background-color: #000059;
	background-image: url(../images/picture.jpg)
	background-repeat: repeat-x;
	font: small Arial, Helvetica, sans-serif;
}
4.4.	Stap 2: division container definiëren
Voor het gemak wordt er meestal een division gemaakt waarin alle andere elementen worden geplaatst. Deze division krijgt een achtergrondkleur, een voorgrondkleur en marges. Een dergelijke division wordt vaak een container genoemd.

#container{
/* plaatshouder voor alle pagina-elementen */
/* achtergrondkleur: bijna wit */
	background-color: #fdf8f2;
	color: #000000;
	margin: 30px 40px 30px 40px;
/* padding creëert ruimte tussen de inhoud en de rand van de division */
	padding: 10px;
}
4.5.	Stap 3: HTML document maken en stijldefinities 	toepassen

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
  <head>
    <title>
      Een XHTML 1.0 Strict standaard template
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link href="stijl/stijl.css" rel="stylesheet" 
		type="text/css" media="all" />
  </head>
  <body>
	<div id=”container”>
	<p>Plaatshouder voor alle andere elementen</p>
	<!-- einde div container --> 
	</div>
  </body>
  </html>

 
Voorbeeld in Firefox
4.6.	Stap 4: kopregel definiëren en toepassen
In het stijlblad wordt opgenomen:

#kopregel{
}

#kopregel_onder{
	border-top:solid 1px #333333;
	background-color:#fdf8f2;
	border-bottom: 1px solid #333333;
}

De body in het HTML bestand wordt:

<body>
	<div id=”container”>
		<div id=”kopregel”><img src=”../images/logo.jpg” alt=”Logo” /> 
			<div id=”kopregel_onder”>kopregel onder
			</div><!-- einde div kopregel_onder -->  
		</div><!-- einde div kopregel -->
	</div><!-- einde div container -->

Je plaatst de afbeelding in de kopregel div, daarin plaats je ook een andere div: kopregel_onder. In deze kopregel plaats je testregels tekst om na te kunnen gaan wat het resultaat is.
De verschillende divisions zijn in elkaar geplaatst, dit wordt nesten genoemd. De divisions moeten in de juiste volgorde worden afgesloten. Geef bij elke afsluitende tag aan welke division wordt afgesloten. Zo blijft de structuur van de code duidelijk.

 
Voorbeeld in Firefox

De kopregel onder gaat de koppelingen naar andere pagina’s bevatten, de tekst voor de links wordt geplaatst:

<body>
<div id=”container”>
	<div id=”kopregel”><img src=”../images/logo.jpg” alt=”Logo” /> 
			<div id=”kopregel_onder”>
				<p>Titel</p>
				Home  | Sitemap | Contact 
			</div><!-- einde div kopregel_onder -->  
		</div><!-- einde div kopregel -->
	</div><!-- einde div container -->
</body>

 
Voorbeeld in Firefox

De koppelingen worden daadwerkelijk aangebracht:

<body>
	<div id=”container”>
		<div id=”kopregel”><img src=”../images/logo.jpg” alt=”Logo” /> 
			<div id=”kopregel_onder”>
				<p>Welkom op onze site</p>
				<a href=”#”>Home</a>  | 
				<a href=”#”>Sitemap</a> | 
				<a href=”#”>Contact</a> </div>
			</div><!-- einde div kopregel_onder -->  
		</div><!-- einde div kopregel -->
	</div><!-- einde div container -->
</body>

De links krijgen het standaard uiterlijk van een hyperlink, dit past niet goed in het ontwerp.

 
Voorbeeld in Firefox

Het stijlblad wordt uitgebreid met definities voor a: link en a:visited. De onderlijning die aangeeft dat de tekst een link bevat kan worden opgelost door text-decoration: none.

#kopregel_onder a:link a:visited	{
	text-decoration: none;
	background-color:#fdf8f2;
	color: #333333;
	font-style:oblique;
}

De paginatitel valt weinig op, de h1 tag voor deze division krijgt de volgende definitie:

#kopregel_onder h1	{
	color: #333333;
	font-size:14px;
	font-style:oblique;
	font-weight: bold;}

De HTML code wordt:

<body>
	<div id=”container”>
		<div id=”kopregel”><img src=”../images/logo.jpg” alt=”Logo” /> 
			<div id=”kopregel_onder”>
				<h1>Welkom op onze site</h1>
				<a href=”#”>Home</a>  | 
				<a href=”#”>Sitemap</a> | 
				<a href=”#”>Contact</a> 
			</div><!-- einde div kopregel_onder -->  
		</div><!-- einde div kopregel -->
	</div><!-- einde div container -->
</body> 

 
Voorbeeld in Firefox
4.7.	Stap 5: de hoofdsectie met de inhoud en zijbalk
De hoofdsectie wordt na de kopregel geplaatst. De hoofdsectie bevat een zijbalk en een sectie voor de inhoud van de pagina. Na de inhoud-definitie wordt nog een voetregel geplaatst. Het stijlblad wordt uitgebreid met:
 
#zijbalk	{
	float: left;
	border: 1px solid #000059;
	width: 230px;
	background-color: #FFFFFF;
	color: #000000;
	margin: 0;
	padding: 0;
}
#inhoud	{
	/* top right bottom left, in de richting van de klok */
	margin: 0 0 0 240px;
	padding: 0;
	border: 1px solid #000059;
	background-color: #FFFFFF;
	color: #000000;
}
#voetregel	{
	clear: both;
	border: 1px solid #000059;
	margin-top: 10px;
}

De HTML code wordt nu zó uitgebreid:

<body>
	<div id=”container”>
		<div id=”kopregel”><img src=”../images/logo.jpg” alt=”Logo” /> 
			<div id=”kopregel_onder”>
				<h1>Welkom op onze site</h1>
				<a href=”#”>Home</a>  | 
				<a href=”#”>Sitemap</a> | 
				<a href=”#”>Contact</a> 
    			</div><!-- einde div kopregel_onder -->  
		</div><!-- einde div kopregel -->
		<div id=”hoofdsectie”>
			<div id=”zijbalk”>
				<p>inhoud zijbalk</p>
			</div><!-- einde div zijbalk -->
			<div id=”inhoud”>
				<p>inhoud</p>
			</div><!-- einde div inhoud -->
		</div><!-- einde div hoofdsectie -->
		<div id=”voetregel”>
			Copyright 2007 Alle rechten gereserveerd.
		</div>
	</div><!-- einde div container -->
</body>
</html>


 
Voorbeeld in Firefox

 
Voorbeeld in Internet Explorer 6
 
HTML code twee_kolommen_layout.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
  <head>
    <title>
      Twee kolommen lay-out
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link href="stijl/stijl.css"
	rel="stylesheet" type="text/css" media="all" />
  </head>
<body>
<div id="container">
	<div id="kopregel"><img src="../images/logo.jpg" alt="Logo" />
    		<div id="kopregel_onder">
      		<h1>Welkom op onze site</h1>
      		<a href="#">Home</a> | 
			<a href="#">Sitemap</a> | 
			<a href="#">Contact</a>
		</div><!-- einde div kopregel_onder -->
  	</div><!-- einde div kopregel -->
  	<div id="hoofdsectie">
    		<div id="zijbalk">
      		<p>inhoud zijbalk</p>
    		</div><!-- einde div zijbalk -->
    		<div id="inhoud">
      		<p>inhoud</p>
    		</div><!-- einde div inhoud -->
	</div><!-- einde div hoofdsectie -->
	<div id="voetregel">
		Copyright 2007 Alle rechten gereserveerd.
	</div>
</div><!-- einde div container -->
</body>
</html>
 
CSS regels stijl.css:

/* CSS stijl */
body {
	/* rand, uitvulling, achtergrond, lettertype instellen */
      margin: 0;
	padding: 0;
	background-color: #666666;
	font: small Arial, Helvetica, sans-serif;
	color: white;
}
#container {
	/* plaatshouder voor alle pagina-elementen */
      /* achtergrondkleur: bijna wit */
      background-color: #ffffff;
	color: #000000;
	margin: 30px 40px 30px 40px;
	/* padding creëert  ruimte tussen de elementen en de rand van de   	division */
      padding: 10px;
	border: 1px;
}
/* division met elementen voor de kopsectie */
	#kopregel {
	background-color:#ffffff;
	height: 1%;
}
#kopregel_onder {
	border-top:solid 1px #333333;
	background-color:#ffffff;
	border-bottom: 1px solid #333333;
	height: 1%;
}
#kopregel_onder a:link, #kopregel_onder a:visited {
	text-decoration: none;
	background-color:#ffffff;
	color: #333333;
	font-style:oblique;
}
#kopregel_onder h1 {
	color: #333333;
	font-size:14px;
	font-style:oblique;
	font-weight: bold;
}
#hoofdsectie {
	/*position: relative;
      top:0;
      left:  0;*/
      width: 100%;
	margin-top: 10px;
}
#inhoud {
	/* top right bottom left, in de richting van de klok */
      margin: 0 0 0 240px;
	padding: 0;
	border: 1px solid #000059;
	background-color: #FFFFFF;
	color: #000000;}
#zijbalk {
	float: left;
	/*position: absolute;*/
      /*top: 0;*/
      /*left: 0;*/
      border: 1px solid #000059;
	width: 230px;
	background-color: #FFFFFF;
	color: #000000;
	margin: 0;
	padding: 0;
}
#voetregel {
	clear: both;
	border: 1px solid #000059;
	margin-top: 10px;
}


4.8.	En nu verder …

Je kunt nu, gewapend met de kennis uit deze reader, sites ontwerpen en maken zonder gebruik te maken van tabellen voor de lay-out. Je kunt XHTML sites maken waarbij de opmaak  en paginastructuur door CSS wordt bepaald. Het is nu aan jou om te zoeken naar creatieve oplossingen voor het ontwerpen en maken van een site waar de bezoekers graag naar terug komen en waarvan de gebruikers vinden dat het vooral een aantrekkelijke, interessante en goed ontworpen site is.

Kijk kritisch en nieuwsgierig naar de sites die bezoekt, je wordt zo wellicht op leuke en goede ideeën gebracht.

Veel succes!
 
Bijlage: Nuttige links

W3C	www.w3c.org

XHTML 1.0	www.playgarden.com/w3c/TR/xhtml1/overview.html

W3Schools	www.w3schools.com/xhtml/

HandleidingHTML	www.handleidinghtml.nl/css/

Webdesign.about.com	webdesign.about.com/od/advancedcss/a/aa042406.htm

Madness.nl	www.madness.nl/artikel/default.asp 

Websitemaken.be	www.websitemaken.be/index.php?page=show_item&id=470

Sitemasters.be	www.sitemasters.be/?pagina=tutorials/tutorials&cat=2&id=90 

TopStyle Lite	http://topstyle.en.softonic.com/