<head><style type="text/css">h1 {font-size: 150%h2 {font-size: 130%p {fontsize: 100%</style></head><head><style type="text/css">h1 {font-size: 150%h2 {font-size: 130%p {font-size: 100%</style></head><head><style type="text/css">h1 {font-size: 150%h2 {font-size: 130%p {font-size: 100%</style></head><head><style type="text/css">h1 {font-size: 150%h2 {font-size:!"#!"$%&'( 130%p {font-size: 100%</style></head><head><style type="text/css">h1 {font-size: 150%h2 {font-size: 130%p {font-size: 100%</style></head><head><style type="text/css">h1 {font-size: 150%h2 {font-size: 130%p {font-size: 100%</style></head><head><style type="text/css">h1 {font-size: 150%h2 {font-size: 130%p {fontsize:100%</style></head><head><style (((#)*+,( type="text/css">h1 {font-size: 150%h2 {font-size: 130%p {font-size: 100%</style></head><head><style type="text/css">h1 {font-size: 150%h2 {font-size: 130%p {font-size: 100%</style></head><head><style type="text/css">h1 {font-size: 150%h2 {font-size: 130%p {font-size: 100%</style></head><head><style type="text/css">h1 ((((((#-,,)#( {font-size: 150%h2 {font-size: 130%p {font-size: 100%</style></head><head><style type="text/css">h1 {font-size: 150%h2 {font-size: 130%p {font-size: 100%</style></head><head><style type="text/css">h1 ( {font-size: 150%h2 {font-size: 130%p {font-size: 100% </style></head><head><style type="text/css">h1 {font-size: 150%h2 {fontsize: 130%p {font-size: 100%</style></head><head><style type="text/css">h1 {font-size: 150%h2 {font-size: 130%p {font-size:,./(01232(456252( 100%</style></head><head><style Een basistype="text/css">h1 {font-size: 150%h2 {font-size: 130%p {font-size: 100%</style></head><head><style type="text/css">h1 {font-size: 150%h2 {font-size: 130%p {font-size: 100%</style></head><head><style Bronnen: type="text/css">h1 {font-size: 150%h2 { ></head><head><style HTML & Web Publishing type="text/css">h1 Grand Cru - Stefan Munz {font-size: 150%h2 {font-size: 130%p Webdesign {font-s></head><head><style in de praktijk - Peter Kentie type="text/css">h1 {font-size: 150%h2 {font-size: www.handleidinghtml.nl/css/eigenschappen/eigenschappen.html 130%p {font-s ></head><head><style type="text/css">h1 {font-size:
%&-78$(( CSS. Hoe, wat, waar, wanneer, waarom 3 1 Een eerste style sheet Css binnen een HTML-bestand Achtergrondkleur Tekstopmaak Fonteigenschappen Tekst benadrukken Opsommingslijsten External style sheet 4 5 5 6 7 8 9 12 2 Teksteigenschappen, classes, DIV en SPAN Tekst uitlijnen Inspringen Letterspacing Contextuele selectie Classes DIV en SPAN hyperlinken 13 13 14 14 14 15 16 17 3 Boxes, randen en (achtergrond)afbeeldingen Boxeigenschappen Positionering van elementen Float en clear Achtergrondafbeeldingen Background-repeat Background en position 20 21 22 23 27 28 29 2
!##9(-:.;(<1=;(<116;(<1//..6;(<116:>(( Wie wel eens een oude HTML-pagina (van voor 1996) heeft gezien, zal vinden dat deze er maar saai uitzag. Dat komt omdat er toen nog niet veel mogelijkheden bestonden om een website een mooi uiterlijk te geven. Toch was dat precies de bedoeling in die tijd. Je kon aangegeven wat de titel was, een aantal kopjes in de tekst plaatsen en aangeven dat een bepaald stukje tekst benadrukt moest worden. En dat was het. Maar dat was ook precies waarvoor HTML ontwikkeld was. HTML is nooit bedoeld om pagina s op te maken en vorm te geven. Met het populairder worden van het Internet heeft toenmalig marktleider Netscape op een gegeven moment besloten om tags te ontwikkelen waarmee we onder andere tekst verschillende kleuren konden geven en een plaatje als achtergrond van een pagina konden gebruiken. Webmasters over de hele wereld waren hiervan zo verrukt, dat binnen de kortste keren het halve Internet was voorzien van achtergrondplaatjes en gekleurde teksten. Het was duidelijk dat iedereen de zelfgemaakte webpagina s zo mooi mogelijk wilde maken. Het werd echter ook snel duidelijk dat HTML daar niet echt geschikt voor was. Heb je weleens de code bekeken die een WYSIWYG-programma, zoals Frontpage of Dreamwever, voortbrengt? Eindeloze tabellen in tabellen om de pagina vorm te geven en een ontelbare reeks font-tags voor de tekstopmaak. Kortom, een onoverzichtelijk hoeveelheid codes waarin fouten nauwelijks op te sporen zijn. Dat moest toch anders kunnen. Het World Wide Web Consortium (W3C) dat de webstandaarden beheert, had ook in de gaten dat HTML niet volledig aan de eisen voldeed. Het bedacht een taal waarmee de vorm van elke tag kon worden beschreven: CSS. Zo werd het vanaf 1996 mogelijk om in een apart stijlblokje, geplaatst in de header, aan te geven hoe men de pagina opgemaakt wilde hebben, of als het om meerdere pagina s gaat zelfs met een extern stijlblad (style sheet). Een van de grote voordelen hiervan is dat inhoud en opmaak gescheiden zijn. Bij het maken van pagina s hoef je je alleen nog maar bezig te houden met de inhoud. Een ander voordeel is dat je veranderingen maar eenmaal hoeft aan te brengen in het stijlblad. Dit is vooral handig als je een behoorlijk aantal pagina s hebt en je wilt bijvoorbeeld de achtergrondkleur veranderen. Omdat het stijlblad gekoppeld is aan de webpagina s veranderen deze allemaal mee. Het is mogelijk meerdere, zelfs overlappende (cascading), stijlbladen te gebruiken. Daarom de naam Cascading Style Sheets. 3
?(,./(..62=.(2=@A.(2B..=(( We beginnen eenvoudig, slechts één enkele pagina, twee kopjes, een stukje tekst met een schuin gedrukt stukje en een ongeordende opsomminglijst. Voor de opmaak gaan we er stap voor stap wat CSS op loslaten. Zonder opmaak zal de webpagina er als volgt uitzien. Rechts zie je de code van bovenstaande page. Je ziet dat er niet of nauwelijks gebruik is gemaakt van opmaakcodes. Omdat het hier om de opmaak gaat doet de inhoud er niet zoveel toe. We maken daarom gebruik van de zogenaamde Lorem Ipsum dummy-tekst. Deze tekst wordt al vanaf 1500 gebruikt. Nog altijd wordt deze tekst gebruikt als het alleen om opmaak gaat. Onderzoek heeft namelijk uitgewezen dat goed leesbare tekst afleidt van de opmaak. 4
CSS formaten binnen een HTML-bestand definiëren Als het slechts om één pagina gaat, kunnen we de opmaak code in het HTML-bestand zetten. (style=stijl, formaat) Bij meerdere pagina s die dezelfde opmaak gebruiken, wordt er een apart stijlblad gemaakt. Daar komen we later op terug. Het stijlblok, zoals we dat noemen, wordt geplaatst in de header van het HTMLbestand. Met <style>... </style> bepaal je een gebied waar de CSS-formaten moeten komen. <head> <title>stijlblad</title> <style type="text/css"> <!-- In de begintag moet vermeld worden om wat voor soort stijltaal het gaat. Voor CSS is dat de vermelding: type="text/css"> --> </style> </head> Let op: Oudere browsers, die geen CSS kennen, kunnen de code per ongeluk interpreteren als tekst die moet worden weergegeven. Om dat te voorkomen moeten CSS-formaten tussen (HTML)-commentaar haken geplaatst worden. <!-- --> Een achtergrondkleurtje In de eerste plaats gaan we de achtergrond van de pagina een kleurtje geven. Normaal gesproken zetten we de achtergrondkleur in de <body>-tag. Omdat we de gehele opmaak in het stijlblokje willen zetten, laten we die daar weg. We gebruiken het body-element van CSS om de achtergrondkleur aan te geven. <head> <title>lorem</title> <style type="text/css"> <!-- body {background-color: #EDEDDC; --> </style> </head> Ik heb hier gekozen voor een licht beige kleur met het nummer EDEDDC. Voor kleuren kun je een HTMLkleurentabel raadplegen. Let op - Voor zo n hexa-decimaal-getal moet een hekje (#) geplaatst worden. - De dubbele quotes ( )zijn hier niet nodig. - Voor een naam zoals red, green of black hoeft geen hekje. 5
Tekstopmaak Als voor het hele document één bepaald lettertype wordt gebruikt, dan wordt dat eveneens in het body-element van het stijlblok aangegeven. Ook dat staat normaal gesproken in de <body>-tag. Maar als er meerdere pagina s zijn die alle gebruik maken van dezelfde opmaak, zijn al deze pagina s aan één extern stijlblad gekoppeld. De opmaak voor (tekst)koppen geven we buiten het body-element aan. Je hoeft in het stijlblok slechts eenmaal aan te geven hoe de kop van een bepaald niveau (bijvoorbeeld <h3> ) eruit moet zien. Dat zal dan voor het hele document gelden. <style type="text/css"> <!-- body { background-color: #ededdc; font-family: Arial, Verdana, Helvetica; font-size: 14 px; color: #666666; h3{font-family: monotype corsiva ; color:#990000; h1{font-family: arial rounded mt bold ; color:#336666; --> </style> Aan het body-element is toegevoegd: - Het gewenste lettertype (font-family:). Het is mogelijk meerdere fonts (gescheiden door komma s) op te geven. Het eerste font dat de browser vindt, wordt gebruikt. Dat kan vooral handig zijn als je gebruikt maakt van een redelijk onbekend font dat niet door de browser wordt herkend. De browser gaat dan op zoek naar een vervangend font. Dat kan wel eens tegenvallende resultaten geven. - De lettergrootte (font-size:) Ik heb hier gebruik gemaakt van px (pixels). Je kunt ook kiezen voor pt (punten). Het laatste komt meer overeen met wat je gewend bent. D.w.z. 12 pt komt overeen met lettergrootte 12. (Een weetje: één punt is gelijk aan 1/72 deel van een inch (=2,54 cm). Lettergrootte 12 is dus 12/72=1/6 deel van een inch.) - De fontkleur (color:) De verschillende opdrachten worden gescheiden door een ; Verder heeft het kopje van het 3 e niveau (<h3> </h3>) een opmaak gekregen, evenals het kopje van het 1 e niveau (<h1> </h1>). Let op: als de naam van het font uit meerdere woorden bestaat, d.w.z. met spaties, dan dient de naam tussen dubbele quotes te staan. 6
De homepage zal er nu zo uitzien. We kijken zo dadelijk nog hoe we dat schuingedrukte regeltje extra kunnen benadrukken en we gaan iets aan de list doen. Font eigenschappen font-family: Lettertype(n) De namen van één of meerdere lettertypes aangeven. Meerdere namen worden gescheiden door komma s. Namen die bestaan uit meerdere woorden dienen tussen dubbele quotes te staan. font-style: normal italic Normale tekst Schuingedrukte tekst font-variant: small-caps Tekst wordt weergegeven als kapitalen, maar dan net iets kleiner dan de echte hoofdletter. AMSTERDAM font-size: pt px font-weight: bold bolder lighter em * De mate van vetheid. De meest gangbare browsers ondersteunen alleen bold. text-decoration: Hoort eigenlijk bij teksteigenschappen, maar wordt veel gebruikt. Daarom ook even hier. none underline overline line-through None lijkt een beetje overbodig, maar links worden standaard altijd onderlijnd weergegeven. Als je dat niet wilt, dan kun je dus gebruik maken van text-decoration: none. De rest spreekt voor zichzelf. * em komt van ems. De em is de grootte van het huidige lettertype. (Niet te verwarren met em van emphasis (=nadruk). Zie blz 8) 7
Een zin of woorden in een tekst benadrukken Om een zin of enkele woorden in een tekst eruit te laten springen bestaan verschillende mogelijkheden; er is zelfs een combinatie van mogelijkheden. Kijk eens naar het cursief gedrukte zinnetje in de voorbeeldtekst. Praesent iaculis auctor pede We hebben met de italic-tags (<i> </i>) aangegeven dat we dit zinnetje cursief wilden hebben. Het is mogelijk om meer eigenschappen aan die i te koppelen. Stel dat we het niet alleen cursief, maar ook onderlijnd willen hebben. In het stijlblok definiëren we dan: Het zinnetje is nu cursief en onderlijnd, i{text-decoration: underline; slechts gebruik makend van de enkele i-tag. Het kan nog veel gekker: i{text-decoration: underline; font-weight: bold; color: black; Het zinnetje is nu cursief, onderlijnd, vet en zwart, allemaal door de enkele i-tag. In principe kun je dit ook met de enkele bold-tag (<b> </b)> doen. Dit zal hetzelfde effect geven. b{text-decoration: underline; font-style: italic; color: black; Voordeel: Je hoeft niet iedere keer als je een woord of zin wilt benadrukken een hele serie tags in te tikken. Normaal gesproken zou bovenstaande er als volgt uitzien om hetzelfde effect te verkrijgen: <font color="#000000"><b><i><u> Praesent iaculis auctor pede. </u></i></b></font> Nadeel: Als je ergens in de tekst een cursief stukje tekst wil zetten, zonder alle andere poespas, dan gaat dat niet meer. Want er hangen immers allerlei andere zaken aan <i> (of <b>). Veel beter en mooier is het om het EM-element te gebruiken. 8
Em staat voor emphasis (=nadruk). Een stukje tekst geplaatst tussen em-tags (<em> </em>) wordt automatisch cursief weergegeven. In het stijlblok kunnen er veel meer eigenschappen aan toegevoegd worden. Leuk is bijvoorbeeld het tekstmarker-effect. EM{background-color: yellow; EM{background-color: #FFCC99; text-decoration: underline; font-weight: bold; Maar ook een combinatie van vet en onderlijnd kan. Zonder tekstmarker-effect is natuurlijk ook mogelijk. Kortom, iedere gewenste combinatie is mogelijk. (verwar deze em niet met de em die de grootte van het huidige lettertype aangeeft.) Het opmaken van opsommingslijsten De ongeordende lijst (ul) Standaard wordt zo n lijst weergegeven met de disc-bullet (=dicht rondje). Je kunt echter ook kiezen voor andere bullets: circle : square : none : een open rondje een dicht vierkantje wel een opsommingslijst, maar zonder iets ervoor. In het stijlblok geven we dat als volgt aan: ul{list-style-type: square; voorbeeld met style-type square In CSS kun je zelfs je eigen bullets maken met een heel klein gifje. In het volgende voorbeeld gebruik ik een heel klein koperen knopje met de naam copper.gif. ul{list-style-image: url(copper.gif); Voorbeeld met een heel klein plaatje. Je kunt van de vele symbolen in WORD ook mooie eigen bullets maken. 9
De geordende lijst (ol) Voor de geordende lijsten kun je uit de volgende mogelijkheden kiezen: (de meest voorkomende) decimal 1. 2. 3. 4. enz. lower-roman i. ii. iii. iv. enz. upper-roman I. II. III. IV. enz. lower-alpha a. b. c. d. enz. upper-alpha A. B. C. D. enz. ol{list-style:lower-roman; Een voorbeeld met lower-roman nummering Merk op dat -type nu is weggelaten Voorlopig aan het slot van dit hoofdstuk ziet mijn homepage er zo uit: 10
Onder zie je de volledige code van deze homepage. Je ziet dat er in de body nagenoeg geen opmaakcodes te vinden zijn. <html> <head> <title>lorem</title> <style type="text/css"> <!-- body { background-color: #ededdc; font-family: Arial, Verdana, Helvetica; font-size: 14 px; color: #666666; h2{font-family: "monotype corsiva"; color:#990000; h1{font-family: "arial rounded mt bold"; color:#336666; em{ background-color: #FFCC99; text-decoration: underline; font-weight: bold; ul{list-style-image: url(copper.gif); --> </style> </head> <body> <h2>een homepage met een dummy-tekst</h2> <p><h1>lorem IPSUM</h1></p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sed augue at nisl pretium consectetuer. Quisque sagittis eros vitae purus. <em>praesent iaculis auctor pede.</em> Duis ut mi ornare felis tincidunt porta. Aenean ullamcorper tortor. Duis nec enim. Phasellus et nunc eget eros luctus viverra. Nam iaculis metus non nisi. Morbi leo purus, pharetra sit amet, ornare vel, tempor sed, mi. Integer cursus, erat eu cursus varius, est leo pellentesque nulla, et vulputate ipsum diam in lacus. <P> <ul> <li>fusce sagittis interdum risus.</li> <li>aliquam placerat suscipit ligula.</li> <li>duis et mi in diam gravida rutrum.</li> </ul> </P> </body> </html> 11
External style sheet Stel je hebt meerdere pagina s en je wilt voor alle pagina s dezelfde opmaak. Je hoeft dan slechts één stijlblad te maken en deze aan je pagina s linken. Knip het stijlblokje uit je document (het deel dat tussen de commentaarpijlen staat); plak het in een blanco document en sla het op als stijlblad.css Zie onder. Zorg dat het css-document in dezelfde map zit als het HTML-document. body { background-color: #ededdc; font-family: Arial, Verdana, Helvetica; font-size: 14 px; color: #666666; h2{font-family: "monotype corsiva"; color:#990000; h1{font-family: "arial rounded mt bold"; color:#336666; em{ background-color: #FFCC99; text-decoration: underline; font-weight: bold; ul{list-style-image: url(copper.gif;) Haal vervolgens de <stijl>-tags en de pijlen uit de head. Nu gaan we in de head een link maken naar het stijlblad. <head> <title>lorem stijlblad</title> <link rel="stylesheet" type="text/css" href="stijlblad.css"> </head> - rel = relation = relatie - href = hyper reference = hypertekstreferentie Als je deze link in al je pagina s zet, dan zullen ze allemaal dezelfde opmaakstijl krijgen zonder dat je daar veel voor hoeft te doen. Je kunt het stijlblad gewoon aanpassen, veranderen of uitbreiden. Al je pagina s die aan het stijlblad gelinkt zijn, veranderen automatisch mee. Natuurlijk had je ook meteen kunnen beginnen met zo n apart css-bestandje. Tot slot, behalve dat je HTML-document gelinkt is aan een css-bestandje, kun je evengoed nog een stijlblokje maken specifiek bedoeld voor de desbetreffende pagina. <link rel="stylesheet" type="text/css" href="stijlblad.css"> <style type="text/css"> <!-- --> </style> Als beide methodes worden toegepast, dan hebben de formaten die tussen de <style>tags gedefinieerd worden, in conflictgevallen voorrang. 12
C(().D2=.3E./24B1FF./;(!A122.2;($%G(./(#H"&( In dit hoofdstuk gaan we ons bezighouden met het netjes opmaken van de tekst. Met behulp van CSS heb je bijna dezelfde opmaakmogelijkheden als bijvoorbeeld in WORD. Aan de hand van een aantal voorbeelden zullen de meest gebruikte teksteigenschappen de revue passeren. Wat niet voor handen is, maken we zelf met behulp van classes. Marges Net als in een WORD-document, zoals deze pagina, is het ook op een webpagina mooier als je niet direct in de linker bovenhoek begint. Je kunt in het stijlblokje (of op een extern stijlblad) aangeven hoe je de marges wilt hebben. <style type="text/css"> <!-- body { margin-top: 50px; margin-right: 450px; margin-bottom: 50px; margin-left: 50px; --> </style> De tekst op de webpagina begint nu 50 pixels van boven af en 50 pixels van links. Omdat ik de tekst zoveel mogelijk aan de linkerkant wil (dat leest prettiger), is de marge aan de rechterkant 450 pixels. Dit kan ook korter worden geschreven: {margin: 50px 450px 50px 50px; Let daarbij dan wel op de volgorde: top right bottom left. Komma s tussen de opgegeven waarden zijn hier niet nodig. Tekst uitlijnen Er zijn vier mogelijkheden om tekst uit te lijnen: links, rechts, gecentreerd of uitgevuld. Standaard wordt tekst over het algemeen links uitgelijnd. Dat hoef je dan niet speciaal aan te geven. Onder staat een voorbeeld van een stukje uitgevulde tekst. We kunnen deze eigenschap aan de p meegeven. Dat wil zeggen dat alle tekst die tussen <p> </p> staat p{text-align: justify; wordt uitgevuld. justify = uitvullen rechts uitlijnen: gecentreerd uitlijnen: links uitlijnen: text-align: right text-align: center text-align: left 13
Inspringen (text-indent) Indien gewenst kun je de eerste regel van een alinea laten inspringen. Ook deze eigenschap kun je aan de p hangen. Het voorbeeld links is uitgevuld en de eerste regel springt 30 pixels in. p{text-align: justify; text-indent: 30px; Als je een negatief aantal pixels neemt bv. -15px, dan springt de eerste regel 15 pixels naar links. Letter-spacing (de ruimte tussen lettertekens) Een titelkop van het 1 e niveau <h1> </h1> De ruimte tussen de letters is verbreed met 5 pixels. h1{font-family:"arial rounded mt bold"; letter-spacing: 5px; Contextuele selectie Er bestaat een mogelijkheid om een stijl te bepalen voor elementen in een ander element. Dit is minder ingewikkeld dan het klinkt. Kijk eens naar het volgende stukje HTML-code. <h2> dit is een <i>knappe</i> kop </h2> Dat zal er op een webpagina zo uitzien: dit is een knappe kop We kunnen de <i>-tag met behulp van CSS echter zo aanpassen dat er iets anders dan cursief wordt weergegeven als deze tag tussen <h2> </h2> wordt geplaatst. Buiten de <h2> </h2> kan <i> dan gewoon gebruikt worden om tekst cursief weer te geven. 14
We kunnen bijvoorbeeld aangeven dat een cursieve tekst in een h2-kop niet cursief maar rood moet worden en met wat meer ruimte tussen de rode letters. De font-style moet dus normaal worden. h2 i{color: red; letter-spacing: 5px; font-style: normal; We schrijven dan de i achter de h2 zonder komma. De HTML-code ziet er nog steeds als volgt uit <h2> dit is een <i>knappe</i> kop </h2> <br> <i>en dit is een stukje cursief</i> En geeft het volgende resultaat: dit is een knappe kop en dit is een stukje cursief Zo zie je dat de verandering van de <i>-tag alleen maar binnen de <h2>-tags geldt. CLASSES Tot nu toe hebben we gezien hoe de stijl van een HTML-tag kan worden aangepast. Maar wat als we bijvoorbeeld <p> of <h1> in meerdere varianten willen hebben? Ik wil bijvoorbeeld de <h1>-kop in drie varianten: eenmaal blauw, eenmaal groen en onderstreept en eenmaal cursief met een lichtgele achtergrond. We doen dit in het stijlblokje. We beginnen dan met.classnaam{ - De punt (niet vergeten) geeft aan dat je zelf een class maakt. - Dan komt de classnaam. Kies deze zo kort mogelijk: kleine letters en zonder spaties. - Ten slotte komen tussen de accolades de gewenste eigenschappen..blauw{color: blue;.streep{text-decoration: underline; color: green;.schuin{font-style: italic; background-color: #FFFF99; In de HTML-code van bijvoorbeeld <h1> roepen we dan de naam van de gemaakte class aan. <h1 class="blauw">lorem ipsum</h1> <h1 class="streep">lorem ipsum</h1> <h1 class="schuin">lorem ipsum</h1> Drie h1-kopjes met ieder een ander uiterlijk. 15
Dit wordt dan op de webpagina als volgt weergegeven.!! Merk op!! dat de zelfgemaakte class ook in een ander HTML-element kan worden gebruikt. Bijvoorbeeld in de <p>-tag. Dat <p ziet class="schuin"> er dan zo uit: Lorem ipsum dolor sit amet, consectetuer adipiscing elit...................................... Suspendisse lectus urna, faucibus et, hendrerit vel, mollis quis, metus. </p> En dan ziet de alinea er zo uit op de webpagina. Dat wil zeggen dat je zowel de kop als een alinea van een achtergrondkleurtje kan voorzien. DIV en SPAN De twee HTML-elementen DIV en SPAN hebben een bijzondere betekenis in CSS. Dat komt omdat ze zelf geen echte eigenschappen hebben. DIV en SPAN kun je beschouwen als containers waar je weer HTML-code in kunt plaatsten. <div HTML-code> </div> of <span HTML-code> </span> Het enige verschil is dat DIV een nieuwe regel in een doorlopende tekst forceert, net als <p> of <h1>, terwijl SPAN zelf bij het gebruik binnen een tekst in het geheel geen eigenschappen heeft. Zo zal het voorbeeld boven met div in plaats van p exact hetzelfde resultaat geven. <div class="schuin"> Lorem ipsum dolor sit amet,... </div> 16
Met andere woorden DIV en SPAN kunnen o.a. helpen een class zijn werk te laten doen. Een voorbeeld om het verschil tussen DIV en SPAN duidelijk te maken. Stel ik wil dat de alinea met een grote, vette, rode letter begint. Daartoe maak ik in het CSS-stijlblokje een class groot..groot{font-size:4em; font-weight: bold; color: red; De HTML-code <div class="groot">l</div>orem Zal dit resultaat geven. DIV zorgt wel dat de class zijn werk doet, maar forceert een nieuwe regel in de tekst. (Size van de grote letter = 4em. Dat wil zeggen dat de letter 4x groter is dan de grootte van het huidige lettertype.) <span class="groot">l</span>orem De HTML-code Gebruik van SPAN zal het gewenste resultaat geven. Ook SPAN zorgt ervoor dat de class zijn werk doet, maar doet zelf verder helemaal niets. Nog een voorbeeld met SPAN Span is nagenoeg onontbeerlijk als je gebruik wilt maken van subscript of superscript. Bijvoorbeeld H 2 O of 36 m 2. Daar hebben we de verticale uitlijning voor nodig. In het stijlblokje maken we de classes sub en sup. Ook maken we het teken waar het om gaat (in dit geval de 2) iets kleiner, driekwart van het huidige lettertype..sub{vertical-align: sub; font-size: 0.75em;.sup{vertical-align: super: font-size: 0.75em; De HTML-code H<span class="sub">2</span>o <p> 36 m <span class="sup">2</span> 17
Hyperlinks Standaard worden hyperlinks altijd blauw en onderlijnd weergegeven. Als de link eenmaal is gebruikt, dan wordt de kleur van de link paars (de visited link). Op zich is dat wel handig, als er veel links op een webpagina voorkomen, dan kun je in ieder geval zien welke je al hebt gehad. Maar misschien passen de kleuren van de links helemaal niet bij jouw webpagina. Stel je hebt een blauwe of zwarte achtergrond. Dan is of de een of de andere niet te lezen. Je wilt toch dat ook de links mooi bij je gehele lay-out passen Gelukkig kunnen we daar met behulp van CSS iets aan doen. In HTML natuurlijk ook, maar dan moet je de hele bups in de <body>-tag plaatsen. We hebben het er eerder over gehad dat het mooier en zelfs overzichtelijker is om opmaak en inhoud van elkaar te scheiden. Ik wil graag een petrolkleurige link, vet, niet onderstreept, iets meer ruimte tussen de letters en een wit achtergrondje. Als er met de muis over heen wordt bewogen, dan moet de link veranderen in bruin, wel onderlijnd en met een geel achtergrondje. a { color: #006666; background-color: white; font-weight: bold; letter-spacing: 2px; text-decoration: none; a:visited { color: #009966; text-decoration: none; a:hover { color: #990000; background-color: yellow; text-decoration: underline; a:active { color: #482400; text-decoration: none; De link met enkele teksteigenschappen. LET OP: je begint hier met een enkele a. De bezochte (visited) link krijgt een andere kleur. Dit hoeft niet. Als er met de muis over de hyperlink wordt bewogen (hover), dan verandert de link van uiterlijk. De actieve link. Op het moment van klikken verandert de link van kleur. Zo zie je dat je de hyperlinks geheel aan de stijl van jouw webpagina kunt aanpassen. De CSS-code zet je natuurlijk weer in het stijlblokje of nog beter op een extern stijlblad. 18
Tot slot van dit hoofdstuk komen hier nog eens de meest voorkomende teksteigenschappen op een rijtje. Er bestaan nog veel meer eigenschappen, maar veel daarvan worden niet door alle browsers ondersteund. Verder zijn er veel die een behoorlijk typografische kennis vereisen. Die eigenschappen zul je waarschijnlijk nooit gebruiken. Wil je er toch meer over weten dan vind je op het internet genoeg CSS-handleidingen. text-decoration text-align none underline overline line-through left right center justify Uitlijnen van tekst letter-spacing text-indent vertical-align De ruimte tussen letters. Aangeven met aantal px, pt Inspringen van de eerste regel. Aangeven met aantal px, pt. Negatief aantal spring naar links uit. sub super 19
I J:K.2;(61/L./(./(M14B=.6E6:/LN1O0..AL3/E./( In dit hoofdstuk gaan we onder andere boxes behandelen. Wat de vormgeving van een element betreft, wordt er bij Cascading Style Sheets van uitgegaan dat elk element wordt vormgegeven door een rechthoekige gebied, de box. In principe kan ieder HTML-element in een box worden geplaatst. Een box heeft een marge (margin), een rand (border) en padding. margin: de ruimte om de box ten opzichte van andere elementen. border padding: de ruimte van de inhoud (in dit geval de tekst) tot de rand..boxvb{ background-color: #FFFF99; padding: 20px; border-width: 10px; border-style: solid; border-color: #990000; color:#333333; text-align: justify; margin: 30px; CSS-code Zie uitleg volgende bladzijde De rest spreekt voor zich. <div class="boxvb"> HTML-code Dit is tekst in een box. Dit is tekst in een box. Dit is tekst in een box.... </div> 20
Boxeigenschappen Om de rand van zo n box op te maken, bestaan er verschillende mogelijkheden of combinaties daarvan. border-width: border-top: border-right: border-bottom: border-left: px medium thin thick De randdikte Alle randen gelijk Alleen bovenrand Alleen rechterrand Alleen onderrand Alleen linkerrand border-color: kleur De randkleur border-style: none (geen rand) dotted dashed solid double groove ridge inset outset padding: padding-top: padding-right: padding-bottom: padding-left: width px em De randstijl Zie voorbeelden onder Ruimte tussen inhoud en rand. Overal gelijk Alleen boven Alleen rechts Alleen onder Alleen links px De breedte van de box percentage height px De hoogte van de box Achtergrondkleuren en marges zijn optioneel. Dat wil zeggen: het hoeft niet per se, het is een persoonlijke keuze, maar als je ervoor kiest, dan gaat het nagenoeg op dezelfde wijze als bij de teksteigenschappen. In de voorbeelden links zijn alle randen 5px dik. 21
Onder zie je twee voorbeelden van boxen waarvan maar één zijde is opgemaakt. Voorbeeld 1: Het zou kunnen dat je de <h1>-koppen altijd wilt weergeven met een lijn eronder. Ik bedoel hier niet underline. Dan kun je deze eigenschap aan de <h1>-tag meegeven: een box met slechts één enkele rand onder. Voorbeeld 2: Het zou ook kunnen dat je het mooi vindt om een verticaal balkje voor de tekst te hebben. Daar kun je wel een klasse voor maken: een box met één enkele dikke rand links. box met alleen rand onder box met alleen dikke rand links h1 { border-bottom: 5px solid; border-color: #990000;.links { border-left: 30px solid; padding: 5px; border-color: #990000; CSS-code van voorbeeld 1 en 2 Je zou er bijvoorbeeld ook voor kunnen kiezen om op deze manier de kop zowel een lijn onder als een lijn boven te geven, of het stukje tekst aan beide kanten een verticaal balkje. Uiteraard is dit soort dingen altijd een kwestie van smaak. Vaak geldt dan ook dat minder meer is. Dat wil zeggen: houd het zo rustig mogelijk. Dat is altijd mooier en voor de bezoeker van je site wel zo prettig/rustig om te lezen. Positionering van elementen We gaan eens kijken hoe we een paar boxen op onze pagina kunnen positioneren. Als we dat op een natuurlijke ongedwongen manier zouden doen, dan komen de boxen onder elkaar te staan. Of we nu <p>, <h1> of <div> gebruiken, maakt niet uit. Het zijn immers allemaal blokelementen. 22
En blok-elementen verdragen elkaar niet als ze naast elkaar staan. Dat wil dus zeggen dat deze elementen altijd op een nieuwe regel beginnen. Zie voorbeeld..box1{ background-color: #FFFF99 padding: 5px; border-width: 5px; border-style: solid; border-color: #CC3333; width: 20%; height: 100px;.box2{ background-color: #FFFF99; padding: 5px; border-width: 5px; border-style: solid; border-color: #CC3333; width: 20%; height: 100px;.box3{ background-color: #FFFF99; padding: 5px; border-width: 5px; border-style: solid; border-color: #CC3333; width: 20%; height: 100px; <div class="box1"> * </div> <p> <div class="box1"> * * </div> </p> <p> <div class="box1"> * * * </div> </p> Als we de boxen in HTML naast elkaar zouden willen, dan zouden we daar een table voor gebruiken. Daar zijn tables nooit voor bedoeld. Het is in CSS dan ook absoluut not done. Het is ook niet nodig, want CSS biedt daar twee goede eigenschappen voor: float en clear. Met float kun je voor een element (stukje tekst, afbeelding of box) bepalen dat het zich horizontaal aansluit bij een vorig element. float: left; Wil dan ook zeggen: ga met je linkerzijde naast het vorige element staan, al of niet gescheiden door een bepaalde ruimte ertussen (margin). LET OP!!! Als je voor een element de eigenschap float gebruikt, moet je een waarde voor width definiëren in px of een percentage. Clear is een soort <br>. Daarvoor moet je vaak een kleine class maken. Of je verwerkt het in een nieuw volgend element. Bestudeer de volgende voorbeelden maar eens, dan wordt het vast duidelijk. 23
.box1{ background-color: #FFFF99; float:left; padding: 5px; border-width: 5px; border-style: solid; border-color: #CC3333; width: 20%; height: 100px; margin-right: 25px;.box2{ background-color: #FFFF99; float:left; padding: 5px; border-width: 5px; border-style: solid; border-color: #CC3333; width: 20%; height: 100px; margin-right: 25px;.box3{ background-color: #FFFF99; float:left; padding: 5px; border-width: 5px; border-style: solid; border-color: #CC3333; width: 20%; height: 100px;.nieuw{clear: left; <div class="box1"> * </div> <div class="box2"> ** </div> <div class="box3"> *** </div> <p class="nieuw"> Deze tekst begint op een nieuwe regel. </p> Merk op dat de eerste twee boxen een rechtermarge hebben van 25 pixels. Dit om te voorkomen dat de boxen aan elkaar gaan plakken. Aan het eind staat nog een kleine class om de float op te heffen. Als ik dat niet zou doe,n dan zou, ondanks het gebruik van de <p>-tag, de tekst doorgaan achter de derde box. 24
Met afbeeldingen gaat het precies zo. Je hoeft dan alleen geen box te definiëren..tux{ float: left; width: 256px; height: 256px; Natuurlijk moet je wel de hoogte en breedte opgeven en eventueel ook een tussenmarge. Dat was hier echter niet nodig..adium{ float: left; width: 256px; height: 256px;.nieuw{clear: left; <p class="tux"> <img src="tux.png" width="256" height="256" alt="tux"> </p> <p class="adium"> <img src="adium.png" width="256" height="256" alt="adium"> </p> <p class="nieuw"> Dit zijn Tux en Adium </p> 25
Meer mogelijkheden met float Met float kun je nog meer aardige dingen doen. Bijvoorbeeld een tekstomloop om een afbeelding. Of een tekstomloop rond de titelkop. Bekijk het volgende voorbeeld maar eens en de bijbehorende code..kop{ width: 30%; float: left; margin:0; img{float: right; p{margin-top:0; <h1 class="kop">lorem Ipsum</h1> <img src="papillonsz.png" width="200" height="200" alt="vlinder"> <p> Lorem ipsum dolor sit amet,.... </p> De kop drijft aan de linkerkant, het plaatje aan de rechterkant en de tekst loopt daar tussenin. Merk op dat je img kunt gebruiken om het plaatje bepaalde eigenschappen te geven. Pas daar wel mee op, want als je nog meer afbeeldingen gebruikt, dan krijgen ze dezelfde eigenscha.een dat wil je waarschijnlijk niet. Tot slot van deze paragraaf nog het volgende: ook een afbeelding kun je opmaken met een kader (box), dus voorzien van een rand, achtergrondkleur en padding..hond{ background-color: black; border-width: 10px; border-color: red; border-style: dashed; padding: 10px; width: 190px; Let op dat je ook de breedte van het plaatje opgeeft. Anders neemt het kader de toegestane breedte van je webpagina aan. 26
Achtergronden Hoe we de webpagina van een achtergrondkleurtje voorzien, dat weten we nu wel. Daar gaan we het ook in deze paragraaf niet meer over hebben. We gaan kijken hoe we afbeeldingen als achtergrond kunnen gebruiken. Daar zijn met behulp van CSS een aantal mogelijkheden voor. Eerder hebben we al gezien dat we ondanks de achtergrondkleur van de pagina een tekst-element een eigen achtergrondkleur konden geven. Met achtergrondafbeeldingen kan dat ook. body { background-image: url(gentle_03.jpg); margin-top: 50px; margin-right: 450px; margin-bottom: 50px; margin-left: 50px; color: #663300;.bg { width:75%; background-image: url(g112.jpg); color: #FFFFCC; text-align:center; Wees hier wel voorzichtig mee. Het wordt al snel te druk. Als je het toch wilt, zoek dan plaatjes die mooi met elkaar harmoniëren. <h1 class="bg"> Welkom in de wereld van achtergrondjes.<br> Hier zie je dat een stukje tekst zijn eigen achtergrondje kan hebben. Ondanks het feit dat er al een plaatje voor de achtergrond was gebruikt. </h1> 27
Background-repeat (herhalingseffect) Normaal gesproken wordt een achtergrondafbeelding met een soort wallpaper-effect over de totale beschikbare ruimte herhaald. In CSS is het mogelijk een ander effect af te dwingen, zie de voorbeelden hieronder. repeat-y body { background-color:#99cccc; background-image: url(g112.jpg); background-repeat: repeat-x; margin-top: 100px; margin-right: 450px; margin-bottom: 50px; margin-left: 55px; color: #336666; Misschien moet je bij een van deze voorbeelden de margins iets aanpassen. Je moet in ieder geval zorgen dat de tekst leesbaar blijft. no-repeat background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: no-repeat; 28
background-attachment en position Bij pagina s waarbij gescrold moet worden, schuift de achtergrondafbeelding automatisch altijd mee. Je kunt met behulp van CSS echter ook zorgen dat de achtergrond blijft staan. We noemen dit het zogenaamde watermerkeffect. Helaas kan ik hier op papier het scroll-effect niet laten zien. Toch wil ik proberen het met de volgende twee afbeeldingen duidelijk te maken. Een deel van de bovenkant van een webpagina. Met een transparante afbeelding van een beer. Aan de schuifbalk is te zien dat er behoorlijk naar beneden is gescrold. De beer op de achtergrond staat nog steeds op zijn plaats. Is niet mee gescrold. body { background-color:#d8ffb0; background-image: url(bgkl.jpg); background-repeat: no-repeat; background-attachment:fixed; background-position: left 25px; margin-top: 100px; margin-left: 100px; margin-right: 400px; margin-bottom: 100px; color: #336633; De regel background-attachment:fixed; zorgt ervoor dat de achtergrond op z n plaats blijft. Dus gefixeerd op de achtergrond. De tekst scrolt over de achtergronfafbeelding. Niet alle (oudere) browsers ondersteunen deze eigenschap. 29
De backgroundpositie is vooral interessant als je met background-repeat hebt bepaald dat een achtergrondafbeelding slechts éénmaal mag worden weergegeven. Met background-position kun je precies bepalen waar de linkerbovenhoek van de achtergrondafbeelding gepositioneerd moet worden. background-position: horizontaal verticaal; Toegestaan zijn numerieke waarden (aantal pixels px) en onderstaande waarden. LET OP: tussen de opgegeven waarden komt geen komma. CSS-notatie top center middle bottom left right effect verticale uitlijning aan bovenkant horizontal gecentreerd verticale uitlijning aan de basislijn in het midden verticale uitlijning aan de onderzijde horizontale uitlijning links horizontale uitlijning rechts 30