XHTML en CSS. Ruud Koortens Frans Peeters

Transcriptie

1 XHTML en CSS Ruud Koortens Frans Peeters januari 2008

2

3 Inhoudsopgave Inleiding... i 1. XHTML XML Declaratie Het juiste DOCTYPE in hoofdletters De XML-namespace De <title> De juiste karakterset Een extern css-bestand XHTML afspraken Alle tagnamen met kleine letters Alle tags afsluiten Alle waarden van attributen tussen aanhalingstekens Elk genoemd attribuut moet een waarde hebben Afbeeldingen moeten een alt hebben Alle elementen moeten correct genest zijn Commentaar De & en < correct coderen Cascading Style Sheets Scheiding tussen structuur, inhoud en opmaak Overerving De syntaxis van CSS rules Waar kun je CSS plaatsen? Inline CSS Embedded CSS External CSS Selectors Universal selector Element type selector Class selector id selector Pseudo-element selector Pseudo-class selector Descendant selector Parent-child selector Adjacent selector Positionering van pagina-elementen Display Het Box Model Padding, margin en border Positionering, absoluut en relatief Float en clear Float en clear in de praktijk Fonts De font-family eigenschap De font-size eigenschap Hoe meten we? De font-style eigenschap... 35

4 De font-weight eigenschap De font shorthand eigenschap De font variant eigenschap Teksteffecten Tekstuitlijning Pseudo-element selectors Het opmaken van hyperlinks Kleur Het gebruik van kleuren bij het ontwerp van een website De kleur van de body instellen Transparantie en kleuren Wetenswaardigheden over kleur en achtergrondafbeeldingen CSS lay-outs Twee kolommen voorbeeld lay-out met CSS Voorbereiding Stap 1: body eigenschappen instellen in het stijlblad Stap 2: division container definiëren Stap 3: HTML document maken en stijldefinities toepassen Stap 4: kopregel definiëren en toepassen Stap 5: de hoofdsectie met de inhoud en zijbalk En nu verder Bijlage: Nuttige links... 55

5 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 - met tabellen - met 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 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? - i -

6 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 Lees ook de 29 tips op - ii -

7 1. XHTML 1.0 XHTML 1.0 is de oudste versie van extended HyperText Markup Language en de directe opvolger van HTML 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 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 XHTMLpagina 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" " <html xmlns=" 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"?> - 1 -

8 De XML declaratie kan weggelaten worden maar dan kan het document van geen andere karakterset dan utf-8 of utf-16 gebruik maken 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 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 > Het DOCTYPE verwijst altijd naar de site van de W3C en het komt te staan vóór <html> 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=" 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 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 (ook wel bekend als Latin-1), ASCII of UTF-8 (Unicode)

9 <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" /> - 3 -

10 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 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 /> 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 /> 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

11 <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= 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 & en <. Het is trouwens altijd verstandig de entiteitnamen te gebruiken of de unicodenotatie. Een mooi overzicht vind je op Handleiding HTML:

12 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 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

13 De bijbehorende HTML code is: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" 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

14 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 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; - 8 -

15 3.4. Waar kun je CSS plaatsen? Je kunt op drie plaatsen CSS vastleggen: 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 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" " <html xmlns=" 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> - 9 -

16 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 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" " <html xmlns=" 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>

17 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 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; 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

18 body { color: black; background-color: white; 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; 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

19 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 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;

20 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; 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; 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 grootouderkleinkind 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;

21 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%;

22 #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: px; 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 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

23 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 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

24 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 leftpadding 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

25 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" 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> Padding, margin en border

26 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" " <html xmlns=" <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 paddingbottom. 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;

27 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

28 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 { h2 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color:#000000; background-color: #FF0000; margin-left:50px; 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

29 De breedte van een rand kan via vier verschillende declaraties (border-top-width, borderright-width, border-bottom-width en border-left width) worden gegeven of kort met borderwidth 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

30 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

31 regel is gepositioneerd ten opzichte van de linkerbovenhoek van het browserscherm, de tweede is gepositioneerd ten opzichte van de eerste regel 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

32 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 marginright en margin-left om een afstand van 5 pixels te maken tussen de tekst en de afbeelding

33 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!

34 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 clear: right clear: both geeft aan dat aan de linkerkant geen zwevende elementen mogen staan geeft aan dat aan de rechterkant geen zwevende elementen mogen staan geeft aan dat er géén elementen naast het element mogen staan 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

35 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

36 <body> <div id="container"> </div> </body> <div id="kop"> <p>kop</p> </div> <div id="hoofd"> </div> <div id="zijbalk"> <p>eerste zijbalk</p> </div> <div id="zijbalk2"> <p>tweede zijbalk</p> </div> <div id="inhoud"> <p>inhoud</p> </div> <div id="voetregel"> <p>voetregel</p> </div>

37 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

38 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 browservenster. 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 layout 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 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

39 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 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 (met schreef) (serif) Arial (schreefloos) (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 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: