webdesign CSS Cascading Style Sheets CSS staat voor Cascading Style Sheets. Ook de term "Style Sheets" wordt wel gebruikt.

Transcriptie

1 webdesign CSS Cascading Style Sheets CSS staat voor Cascading Style Sheets. Ook de term "Style Sheets" wordt wel gebruikt. Waarom zou je CSS gaan gebruiken? 1 Met CSS kun je in hoge mate de weergave van je pagina bepalen en kun je effecten bereiken die met HTML tags alleen niet mogelijk zijn. Zo kun je bijvoorbeeld bepalen dat alle <h3> tags 18 Points groot moet zijn in de kleur rood en met het lettertype Arial. Het is dus veel flexibeler dan HTML wat de vormgeving betreft. 2 CSS stelt je in staat om alle stijlelementen van een website in een document onder te brengen. Dat wil zeggen dat je maar een document hoeft te veranderen om alle pagina's van je site aan te passen. Wil je bijvoorbeeld de kleur van al je Headings veranderen of het lettertype dat je in je paragrafen gebruikt? Dan verander je het CSS document en alle pagina's nemen deze stijl dan over. Met HTML zou je al deze wijzigingen in alle pagina's moeten aanbrengen, wat veel meer werk is. 3 De pagina's van je site worden kleiner doordat je veel minder code hoeft te gebruiken. Hierdoor zal je site sneller laden. Stijlregels Als je stijlregels wilt opstellen voor je pagina's dan zullen deze pagina's moeten verwijzen, oftewel linken, naar de betreffende Style Sheet. Dit wordt ook wel aangeduid als de implementatie van Style Sheets in HTML. Dit verwijzen naar de Style Sheets in een HTML pagina kan op drie manieren: 1 Inline Style Sheet 2 Internal (of "Embedded") Style Sheet 3 External Style Sheet webdesign met css pagina 1

2 1 Een inline Style Sheet. In een inline Style Sheet worden de stijlelementen direct toegevoegd aan de HTML tag. Deze manier is niet erg handig, omdat je de stijlelementen bij iedere tag opnieuw moet intypen. Gebruik de inline Style Sheet alleen als je een unieke stijl aan een enkele tag wilt geven, niet als je de stijl op meerdere pagina's wilt gebruiken. Voorbeeld van een inline Style Sheet (alle CSS codes in de voorbeelden worden weergegeven in vet) <title>de titel van de pagina.</title> <p style="hier komen de stijlelementen voor deze paragraaf"> </p> 2 Een internal (of embedded) Style Sheet. Dit is de meest voorkomende Style Sheet. Bij de internal Style Sheet schrijf je de stijlinformatie tussen de en tags. De stijlinformatie in deze Style Sheet wordt dan alleen toegepast op dit ene document. De internal Style Sheet is daarmee ideaal voor sites die maar een paar pagina's groot zijn of voor individuele pagina's die een aparte stijl moeten hebben ten opzichte van de rest van de site. Voorbeeld van een internal (embedded) Style Sheet: <title>de titel van de pagina.</title> Hier komen de stijlregels Hier komt de inhoud van je pagina. Let op: Zie je de tekens: en? Deze staan er niet zomaar. Dit zijn de commentaartekens van HTML die ervoor zorgen dat de stijlinformatie niet op het scherm getoond wordt wanneer een (oude) browser geen CSS ondersteunt. Je kunt dus het beste altijd de stijlregels tussen en plaatsen, zoals hierboven! 3 Een external Style Sheet. Deze Style Sheet staat in een apart document met de extensie.css. Er wordt gelinkt naar dit.css document met de link tag, zie het voorbeeld hieronder. External Style Sheets zijn ideaal voor grote sites met veel pagina's, omdat de stijlinformatie van alle pagina's in een document gezet kan worden. Wil je de stijl van je pagina's veranderen, dan hoef je slechts een document te veranderen om alle pagina's aan te passen! Dit scheelt erg veel tijd. Voorbeeld van een external Style Sheet: <title>de titel van de pagina.</title> <link href="bestandsnaam.css" rel="stylesheet" type="text/css" /> Hier komt de inhoud van je pagina. webdesign met css pagina 2

3 Let op: Als je een external Style Sheet gebruikt moet je zorgen dat dit externe bestand een.css extensie heeft, dus bijvoorbeeld "bestandsnaam.css". Gebruik geen HTML tags in de stijlregels, anders werkt het niet. Dus daar geen < en > gebruiken. Een eerste Style Sheet De eerste Style Sheet laten we drie keer zien, namelijk als inline, internal en external Style Sheets. De basisstructuur van een stijlregel: tag { definitie; definitie; definitie } De definities bestaan uit een eigenschap en een waarde. Een internal Style Sheet <title>informatica.nl - Alles voor het bouwen van je site!</title> body { font-family: Verdana; background-color: lightblue } h2 { color: green; font-style: italic } p { text-decoration: underline } <h2>welkom op de informaticasite <p>dit is de eerste paragraaf. De tekst is onderstreept en de h2 is groen en schuin gedrukt. De achtergrondkleur is lichtblauw en het lettertype is Verdana.<br> Precies zoals opgegeven! ;-) </p> Let op: Vergelijk de stijlregels in de Style Sheet met de basisstructuur aan het begin van deze cursus: - je begint met de tag (zonder < en >!!) waarvoor je stijlregels wilt opgeven, in het voorbeeld, <h2> en <p>. - dan de definitie, bestaande uit eigenschappen: font-family, background-color, color, font-style en text-decoration - dan voor elke eigenschap een waarde: Verdana, lightblue, green, italic en underline. Belangrijke dingen voor alle Style Sheets: - De tag in de stijlregel (bijv. p, body en h2) moet je zonder < en > schrijven! - De definities worden omvat door accolades: { en }. - Bij meerdere definities, plaats je achter iedere definitie een puntkomma, behalve achter de laatste definitie. Een external Style Sheet Bij een external Style Sheet zet je de stijlregels in een nieuw bestand en dan sla je het op als.css bestand. Let er op dat je geen HTML-tags (< >) gebruikt in het.css bestand! Als je het.css bestand gemaakt hebt, hoef je alleen nog maar te verwijzen naar dit bestand in de betreffende HTML-pagina. Dat doe je met de <link> tag die je in het gedeelte van je pagina plaatst. Een voorbeeld: eerst zie je het.css bestand met de stijlregels, stylesheet.css, daarna de HTML-pagina die hiernaar verwijst. Het bestand "stylesheet.css": body { font-family: Verdana; background-color: lightblue } h2 { color: green; font-style: italic } p { text-decoration: underline } De HTML-pagina die naar "stylesheet.css" verwijst: <title> Informatica.nl - Alles voor het bouwen van je site!</title> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> Hier komt dan weer de inhoud van je pagina. webdesign met css pagina 3

4 De stijlinformatie voor de betreffende HTML-pagina wordt uit het bestand "stylesheet.css" gelezen. Let er wel op dat je verwijst naar de juiste locatie van het.css bestand, dus staat het bestand in de map "styles", dan moet je verwijzen naar: styles/stylesheet.css. Een inline Style Sheet Bij een inline Style Sheet schrijf je direct in de HTML-tag. Hierdoor is de inline Style Sheet minder geschikt om veel te gebruiken, aangezien je bij iedere tag de stijlinformatie opnieuw moet intikken. Gebruik het dan ook alleen als je een specifieke tag een afwijkend uiterlijk wilt geven. Voorbeeld van een inline Style Sheet: <title> Informatica.nl - Alles voor het bouwen van je site!</title> <body style="font-family: Verdana; background-color: lightblue"> <h2 style="color: green; font-style: italic"> Welkom op de informaticasite <p style="text-decoration: underline">hier komt de inhoud van de eerste paragraaf.</p> Fonts Voor elke tag kun je stijlregels opgeven. We beginnen met de fonts en de verschillende eigenschappen en waarden hiervan. Als je met fonts werkt, kun je verschillende eigenschappen opgeven, zoals de kleur, het lettertype, de font-style en de fontweight. Zo kun je een tekst er precies zo uit laten zien als jij wilt. Font-family Met de font-family eigenschap kun je een bepaald lettertype opgeven. Je kunt er ook meerdere opgeven, dan moet je er wel een komma tussen zetten. Je kunt het best altijd als laatste een zogenaamd generiek font (generic font) plaatsen. Dit font is normaal gesproken altijd aanwezig op een computer. Er zijn vijf generieke fonts: serif, sans-serif, cursive, fantasy, monospace. Een voorbeeld van font-family: p { font-family: Arial, Courier, 'Franklin Gothic Book', sans-serif } Resultaat: tekst in deze paragraaf wordt geschreven in lettertype Arial. Als Arial niet aanwezig is dan wordt Courier gebruikt enz. Bij een font met spaties in de naam, Franklin Gothic Book, moet de fontnaam in de stijlregel tussen apostroftekens geplaatst worden (' en '). Font-style Drie mogelijke waarden voor font-style: normal (is standaard), italic, oblique. Een voorbeeld van font-style: h1 { font-style: italic } p { font-style: normal } Resultaat is schuingedrukte H1 tekst en normale paragraaf-tekst. Font-variant Twee mogelijke waarden voor font-variant: normal (standaard), small-caps Een voorbeeld van font-variant: h1 { font-variant: normal } p { font-variant: small-caps } Resultaat is normaalgedrukte H1 tekst en small-caps (kleine hoofdletters) paragraaftekst. Font-weight Vijf mogelijke waarden voor font-weight: normal, bold, bolder, lighter, of een waarde tussen 100 en 1000 Een voorbeeld van font-weight: h1 { font-weight: 500 } p { font-weight: bolder } Resultaat is aangepaste H1 tekst en aangepaste paragraaftekst. webdesign met css pagina 4

5 Font-size Tien mogelijke waarden voor font-size: xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, of een waarde in bijv. pixels (px), points (pt), percentages Een voorbeeld van font-size: h1 { font-size: 16pt } p { font-size: xx-small } Resultaat is een aangepaste lettergrootte voor kop H1 en paragraaftekst (xx-small). Meerdere font eigenschappen tegelijk Natuurlijk hoef je niet iedere keer een nieuwe stijlregel te beginnen als je een andere font-eigenschap wilt opgeven. Je kunt ze, gescheiden door punt-komma's, achter elkaar opgeven. Voorbeeld: p { font-family: Arial, serif; font-weight: bolder; font-size: 10pt; font-style: italic } Resultaat is de paragraaftekst met de aangegeven eigenschappen. Achtergrond en kleur Hoe kun je een achtergrond(kleur) en tekstkleur instellen met behulp van CSS. Background-color Met de eigenschap background-color stel je de achtergrondkleur in. De waarde die je invult moet dus een kleur zijn. Voor een overzicht van de verschillende kleurnamen en kleurcodes raadpleeg je de kleurcodetabel. Voorbeeld van background-color: body { background-color: black } Hiermee stel je een zwarte achtergrondkleur voor de pagina in. Background-image Hiermee kun je een afbeelding opgeven als achtergrond van je pagina. De waarde is een url. Deze wordt zo opgegeven: url(bestandsnaam.gif), waar "bestandsnaam.gif" de naam van je achtergrondafbeelding is. Voorbeeld van background-image: body { background-image: url(bestandsnaam.gif) } Background-attachment Met background-attachment kun je aangeven of je de achtergrond met de tekst wilt laten meescrollen of dat je een vaste achtergrond wilt hebben. Mogelijke waarden zijn dus: scroll, fixed. Voorbeeld van background-attachment: body { background-image: url(bestandsnaam.gif); background-attachment: fixed } Background-repeat Met background-repeat kun je een achtergrondafbeelding op verschillende manieren herhalen. Waarden: no-repeat, repeat (herhaalt horizontaal en verticaal), repeat-x (herhaalt horizontaal), repeat-y (herhaalt verticaal) Voorbeeld van background-repeat: BODY { background-image: url(bestandsnaam.gif); background-repeat: repeat } Color Met de color eigenschap kun je de tekstkleur veranderen. De waarde van color is dus een kleur. Een overzicht van kleurnamen met hun codes kun je vinden in de kleurcodetabel. Een voorbeeld van color: h1 { color: red } p { color: brown } Resultaat is rode H1 tekst en bruine paragraagtekst. Tekst Met CSS kun je verschillende teksteigenschappen opgeven, zoals de ruimte tussen letters en woorden en het uitlijnen van de tekst. Deze dingen zijn vaak niet of nauwelijks mogelijk met HTML alleen. Hierna worden de verschillende teksteigenschappen besproken. webdesign met css pagina 5

6 Text-align Met text-align kun je een tekst uitlijnen. Mogelijke waarden: center, left, right, justify. Een voorbeeld van text-align: p { text-align: right } div { text-align: center } Resultaat is rechts uitgelijnde tekst en gecentreerde tekst. Text-indent Met text-indent kun je de eerste regel tekst van een paragraaf laten inspringen. De waarde van text-indent is een lengte, zoals bijv. pt, px, of een percentage, %. Voorbeeld van text-indent: p { text-indent: 35px } Resultaat is dat de eerste regel tekst van deze paragraaf 35 pixels is ingesprongen. De tweede regel is weer normaal. Text-decoration Met text-decoration kun je een tekst versieren. Mogelijke waarden zijn: none, underline, overline, line-through, blink. Voorbeeld van text-decoration: h1 { text-decoration: overline } p { text-decoration: underline } div { text-decoration: line-through } Resultaat is lijn boven de tekst, onderstreepte tekst of doorgestreepte tekst. Letter-spacing Met letter-spacing stel je de ruimte tussen de letters in. Mogelijke waarden: normal, auto, of een lengte (zoals px, pt). Voorbeeld van letter-spacing: p { letter-spacing: 5px } div { letter-spacing: 7pt } Resultaat is een ruimte tussen de letters van 5 pixels en daarna van tussen de letters 7 points. Word-spacing Word-spacing is soortgelijk aan letter-spacing, maar nu tussen de woorden. Waarden: normal, of een lengte (zoals px, pt) Voorbeeld van word-spacing: p { word-spacing: 5px } div { word-spacing: 7pt } Resultaat is een ruimte van 5 pixels tussen de woorden en daarna een ruimte van 7 points tussen de woorden. Text-transform Met text-transform kun je hoofdletterinstellingen opgeven. Mogelijke waarden: none, capitalize, uppercase, lowercase. Voorbeeld van text-transform: p { text-transform: capitalize } div { text-transform: uppercase } Line-height Met line-height kun je de afstand tussen de regels van een paragraaf of een ander stuk tekst bepalen. Mogelijke waarden: normal, of een eenheid als pt of px, of een percentage Voorbeeld van line-height: p { line-height: 20pt } Resultaat: Je ziet nu dat de afstand tussen de verschillende regels in deze paragraaf 20 points groot is geworden. Zo kun je dus heel makkelijk de regelafstand instellen met behulp van Cascading Style Sheets. webdesign met css pagina 6

7 Classes en ID's Stel je hebt een stijlregel waar in staat dat alle h1's worden weergegeven in het rood. Maar nu heb je een groene h1 nodig. Dan komen de classes in het spel. Daarmee kun je verschillende stijlkenmerken opstellen voor dezelfde soort tags, bijv. h1's. Classes We gaan nu verschillende varianten voor de h1 tag opgeven door middel van classes. In het voorbeeld geven we de volledige internal Style Sheet. We maken een rode, blauwe en groene h1. Voorbeeld van classes voor h1: <title>voorbeeld van classes</title> h1.rood { color: red } h1.blauw { color: blue } h1.groen { color: green } <h1 class="rood">rode H1 tekst</h1> <h1 class="blauw">blauwe H1 tekst</h1> <h1 class="groen">groene H1 tekst</h1> Resultaat: Rode h1 tekst, Blauwe h1 tekst, Groene h1 tekst. Zoals je ziet, maken we de classes door in de head van het document na de h1 een punt te plaatsen en dan een willekeurige naam voor de class te typen (in het voorbeeld: rood, groen en blauw). Vervolgens komen de stijlregels voor h1. Het enige wat je dan nog moet doen is verwijzen naar de betreffende class als je de h1 tag in het body gedeelte zet, zoals hierboven: <h1 class="rood">rode h1 tekst</h1> <h1 class="blauw">blauwe h1 tekst</h1> <h1 class="groen">groene h1 tekst</h1> De naam waarmee je verwijst naar de class, dus hier: rood, groen en blauw, moet dezelfde zijn als de naam die je hebt opgegeven in de stijlregel!! Class voor meerdere tags Je kunt ook een class opgeven die door meerdere HTML tags gebruikt kan worden. Je maakt hem op dezelfde manier als hierboven, alleen nu type je:.rood { color: red } Nu kun je de class rood gebruiken voor allerlei HTML tags, die dan een rode tekstkleur zullen gebruiken. Een voorbeeld: <title>voorbeeld van classes</title>.rood { color: red } <h1 class="rood">rode h1 tekst</h1> <p class="rood">nu krijg je rode paragraaf tekst</p> <div class="rood">opnieuw rode tekst</div> webdesign met css pagina 7

8 ID's Met ID's kun je soortgelijke dingen bereiken als met classes. Je kunt ze het beste alleen gebruiken als je de stijl van een individuele tag wilt veranderen, omdat iedere ID uniek moet zijn. Voorbeeld van een ID: <title>voorbeeld van classes</title> #bruinetekst { color: brown } <h1 id="bruinetekst">bruine h1 tekst</h1> Resultaat is bruine H1 tekst. Let op: Voor de ID die je opgeeft in de head sectie moet een hekje, #, staan!! Verder geldt hier hetzelfde als bij de classes: je moet bij het verwijzen naar de ID dezelfde naam gebruiken die je hebt opgegeven in de head, maar hier zonder hekje. Pseudo-Classes Met Pseudo-Classes kun je de linkkleur instellen. Ook kun je verschillende linkkleuren instellen voor een pagina, dus bijvoorbeeld groene en blauwe links. Er zijn vier verschillende Pseudo-Classes voor links: a:link (normale link), a:visited (bezochte link), a:hover (de muis staat op de link), a:active (als je op de link klikt) Voorbeeld: <title>voorbeeld van classes</title> a:link { color: red } a:visited { color: yellow } a:hover { color: purple } a:active { color: green } <a href=" jouwnaam.nl!</a> Link zonder streep eronder Wil je de links zonder streep eronder? Dan moet je een eigenschap gebruiken die we al eerder gezien hebben: text-decoration, met als waarde: none. Voorbeeld: a:link { color: red; text-decoration: none } a:visited { color: yellow; text-decoration: none } a:hover { color: purple; text-decoration: none } a:active { color: green; text-decoration: none } Achtergrond voor links Ook kun je een achtergrondkleur instellen voor je links, met: background-color. Voorbeeld: a:link { color: red; background-color: black } a:visited { color: yellow; background-color: black } a:hover { color: purple; background-color: black } a:active { color: green; background-color: black } webdesign met css pagina 8

9 Twee kleuren links Soms kan het handig zijn om meerdere kleuren links op een pagina te hebben, bijvoorbeeld voor interne en externe links. Ook dat kan. Stel je wilt blauwe en paarse links op je pagina. Dat doe je dan als volgt: <title>twee kleuren links</title> a.blauw:link { color: blue } a.blauw:visited { color: yellow } a.blauw:hover { color: lime } a.blauw:active { color: green } a.paars:link { color: purple } a.paars:visited { color: yellow } a.paars:hover { color: lime } a.paars:active { color: green } <a class="blauw" href=" blauwe link!</a> <a class="paars" href=" paarse link!</a> Lijsten Met list-style kun je de weergave van je lijsten veranderen. List-style-type Geeft aan wat voor ieder list-item (<li>) getoond wordt. Verschillende waarden mogelijk, afhankelijk van welk soort lijst je gebruikt. Mogelijke waarden voor Unnumbered Lists (<ul>): disc (standaard), circle, square Voorbeeld <ul>: Resultaat: eerste lijstitem tweede lijstitem derde lijstitem ul { list-style-type: square } Mogelijke waarden voor Ordered Lists (<ol>): decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha Voorbeeld (<ol>) Resultaat: I. eerste lijstitem II. tweede lijstitem III. derde lijstitem ol { list-style-type: upper-roman } List-style-image Met list-style-image kun je zelf een plaatje opgeven dat voor ieder list-item (<li>) wordt getoond. Voorbeeld van list-style-image: ul { list-style-image: url('bestandsnaam.gif') } webdesign met css pagina 9

10 List-style-position Twee mogelijke waarden: outside (standaard), inside Voorbeeld van list-style-position: outside ul { list-style-position: outside } Voorbeeld van list-style-position: inside ul { list-style-position: inside } De verschillende Codes en Cursors Dit is de code die je moet gebruiken voor het veranderen van de cursor bij een link: <style> A:link { cursor: crosshair; } In de code hierboven kun je "crosshair" vervangen met één van de codes hieronder als je een andere cursor wilt. Cursor Naam Voorbeeld (ga met de muis over onderstaande teksten) auto crosshair default hand move text wait help n-resize s-resize e-resize w-resize ne-resize nw-resize se-resize sw-resize Wordt weergegeven zoals ingesteld op het systeem van de gebruiker Ziet eruit als een kruis De standaardinstelling (normale pijl) Het handje dat je normaal ziet bij een link Het lijkt alsof je iets moet verplaatsen Wat je ziet als een je met de muis op tekst gaat staan Het bekende zandlopertje! Een vraagteken verschijnt naast de pijl Een pijl naar het noorden Een pijl naar het zuiden Een pijl naar het oosten Een pijl naar het westen Een pijl naar het Noordoosten Een pijl naar het Noordwesten Een pijl naar het Zuidoosten Een pijl naar het Zuidwesten Je kunt de cursor ook weergeven wanneer je met de muis over gewone tekst gaat door bijvoorbeeld de <span> tag te gebruiken. Zo dus: <span style="cursor:crosshair">ga hier met de muis op staan...</span> Kleuren Kiezen Eén van de belangrijkste dingen waar een webmaster op moet letten is het kiezen van kleuren voor zijn/haar site. Je site kan nog zo goed zijn, als de tekst onleesbaar is of als de bezoekers de kleuren lelijk vinden, dan verlaten ze je pagina. In dit artikel vind je een paar sites die je helpen bij de kleurkeuze voor je website. Eerst een paar algemene tips. Tips Er zijn 216 kleuren die web-safe zijn. Dat wil zeggen dat deze kleuren zo getoond worden als jij ze hebt opgegeven. Meestal staan in je HTML editor de web-safe kleuren wel ergens aangegeven. Het is dus verstandig om web-safe kleuren te gebruiken, omdat je dan zeker bent dat bezoekers de kleuren zien die je hebt opgegeven. webdesign met css pagina 10

11 Ook belangrijk is dat je de kleuren afstemt op de doelgroep van je site. Voor sites over humor of moppen kun je daarom best felle kleuren gebruiken, terwijl je voor een site met computercursussen misschien beter wat rustigere kleuren kunt kiezen. Zorg in ieder geval dat je bezoekers de lay-out en kleuren mooi vinden. Webkleuren en hun bijbehorende RGB-waarden aliceblue #F0F8FF aquamarine #7FFFD4 bisque #FFE4C4 blue #0000FF burlywood #DEB887 chocolate #D2691E cornsilk #FFF8DC darkblue #00008B darkgray #A9A9A9 antiquewhite #FAEBD7 azure #F0FFFF black # blueviolet #8A2BE2 cadetblue #5F9EA0 coral #FF7F50 crimson #DC143C darkcyan #008B8B darkgreen # cyan #00FFFF aqua #00FFFF beige #F5F5DC blanchedalmon d #FFEBCD brown #A52A2A chartreuse #7FFF00 cornflowerblue #6495ED darkgoldenrod #B8860B darkkhaki #BDB76B darkmagenta #8B008B darkolivegreen #556B2F darkorange #FF8C00 darkorchid #9932CC darkseagreen #8FBC8F darkturquoise #00CED1 deepskyblue #00BFFF firebrick #B22222 fuchsia #FF00FF gold #FFD700 green # hotpink #FF69B4 ivory #FFFFF0 lavenderblush #FFF0F5 lightblue #ADD8E6 darkred #8B0000 darkslateblue #483D8B darkviolet #9400D3 dimgray # floralwhite #FFFAF0 gainsboro #DCDCDC goldenrod #DAA520 greenyellow #ADFF2F indianred #CD5C5C khaki #F0E68C lawngreen #7CFC00 lightcoral #F08080 darksalmon #E9967A darkslategray #2F4F4F deeppink #FF1493 dodgerblue #1E90FF forestgreen #228B22 ghostwhite #F8F8FF gray # honeydew #F0FFF0 indigo #4B0082 lavender #E6E6FA lemonchiffon #FFFACD lightcyan #E0FFFF light lightgreen goldenrodyellow #90EE90 #FAFAD2 webdesign met css pagina 11

12 webdesign met css pagina 12 Webkleuren en hun bijbehorende RGB-waarden lightgrey #D3D3D3 lightpink #FFB6C1 lightsalmon #FFA07A lightseagreen #20B2AA lightskyblue #87CEFA lightslategray # lightsteelblue #B0C4DE lightyellow #FFFFE0 lime #00FF00 limegreen #32CD32 linen #FAF0E6 magenta #FF00FF maroon # mediumaquamarine #66CDAA mediumblue #0000CD mediumorchid #BA55D3 mediumpurple #9370DB mediumseagreen #3CB371 mediumslateblue #7B68EE mediumspringgreen #00FA9A mediumturquoise #48D1CC mediumvioletred #C71585 midnightblue # mintcream #F5FFFA mistyrose #FFE4E1 moccasin #FFE4B5 navajowhite #FFDEAD navy # oldlace #FDF5E6 olive # olivedrab #6B8E23 orange #FFA500 orangered #FF4500 orchid #DA70D6 palegoldenrod #EEE8AA palegreen #98FB98 paleturquoise #AFEEEE palevioletred #DB7093 papayawhip #FFEFD5 peachpuff #FFDAB9 peru #CD853F pink #FFC0CB plum #DDA0DD powderblue #B0E0E6 purple # red #FF0000 rosybrown #BC8F8F royalblue #4169E1 saddlebrown #8B4513 salmon #FA8072 sandybrown #F4A460 seagreen #2E8B57 seashell #FFF5EE sienna #A0522D silver #C0C0C0 skyblue #87CEEB slateblue #6A5ACD slategray # snow #FFFAFA springgreen #00FF7F steelblue #4682B4 tan #D2B48C teal # thistle #D8BFD8 tomato #FF6347 turquoise #40E0D0 violet #EE82EE wheat #F5DEB3 white #FFFFFF whitesmoke #F5F5F5 yellow #FFFF00 yellowgreen #9ACD32