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 ge...
CSS staat voor Cascading Style Sheets. Ook de term "Style Sheets" wordt wel gebruikt. Waarom zou je CSS gaan gebruiken? 1
2
3
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
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. 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. 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:
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) De titel van de pagina.
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: De titel van de pagina. <style type="text/css"> Hier komt de inhoud van je pagina. Let op: Zie je de tekens: ? 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 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: De titel van de pagina. Hier komt de inhoud van je pagina.
webdesign met css
pagina 2
Informatica
naslag
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 Informatica.nl - Alles voor het bouwen van je site! <style type="text/css">
Welkom op de informaticasite www.informatica.nl!
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. Precies zoals opgegeven! ;-)
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 ,
en
. - 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 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: Informatica.nl - Alles voor het bouwen van je site! Hier komt dan weer de inhoud van je pagina. webdesign met css
pagina 3
Informatica
naslag
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: Informatica.nl - Alles voor het bouwen van je site!
Welkom op de informaticasite www.informatica.nl!
Hier komt de inhoud van de eerste paragraaf.
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
Informatica
naslag
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
Informatica
naslag
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
Informatica
naslag
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:
Voorbeeld van classes <style type="text/css">
Rode H1 tekst
Blauwe H1 tekst
Groene H1 tekst
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:
Rode h1 tekst
Blauwe h1 tekst
Groene h1 tekst
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:
webdesign met css
Voorbeeld van classes <style type="text/css">
Rode h1 tekst
Nu krijg je rode paragraaf tekst
Opnieuw rode tekst
pagina 7
Informatica
naslag
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:
Voorbeeld van classes <style type="text/css">
Bruine h1 tekst
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: Voorbeeld van classes <style type="text/css"> Bezoek jouwnaam.nl! 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
Informatica
naslag
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:
Voorbeeld () ol { list-style-type: upper-roman } Resultaat: I. eerste lijstitem II. tweede lijstitem III. derde lijstitem List-style-image Met list-style-image kun je zelf een plaatje opgeven dat voor ieder list-item (
) wordt getoond. Voorbeeld van list-style-image: ul { list-style-image: url('bestandsnaam.gif') }
webdesign met css
pagina 9
Informatica
naslag
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
Wordt weergegeven zoals ingesteld op het systeem van de gebruiker
crosshair
Ziet eruit als een kruis
default
De standaardinstelling (normale pijl)
hand
Het handje dat je normaal ziet bij een link
move
Het lijkt alsof je iets moet verplaatsen
text
Wat je ziet als een je met de muis op tekst gaat staan
wait
Het bekende zandlopertje!
help
Een vraagteken verschijnt naast de pijl
n-resize
Een pijl naar het noorden
s-resize
Een pijl naar het zuiden
e-resize
Een pijl naar het oosten
w-resize
Een pijl naar het westen
ne-resize
Een pijl naar het Noordoosten
nw-resize
Een pijl naar het Noordwesten
se-resize
Een pijl naar het Zuidoosten
sw-resize
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...
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
Informatica
naslag
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
antiquewhite #FAEBD7
aqua #00FFFF
aquamarine #7FFFD4
azure #F0FFFF
beige #F5F5DC
bisque #FFE4C4
black #000000
blanchedalmon d #FFEBCD
blue #0000FF
blueviolet #8A2BE2
brown #A52A2A
burlywood #DEB887
cadetblue #5F9EA0
chartreuse #7FFF00
chocolate #D2691E
coral #FF7F50
cornflowerblue #6495ED
cornsilk #FFF8DC
crimson #DC143C
cyan #00FFFF
darkblue #00008B
darkcyan #008B8B
darkgoldenrod #B8860B
darkgray #A9A9A9
darkgreen #006400
darkkhaki #BDB76B
darkmagenta #8B008B
darkolivegreen darkorange #556B2F #FF8C00
darkorchid #9932CC
darkred #8B0000
darkseagreen #8FBC8F
darkslateblue darkslategray #483D8B #2F4F4F
darkturquoise #00CED1
darkviolet #9400D3
deeppink #FF1493
deepskyblue #00BFFF
dimgray #696969
dodgerblue #1E90FF
firebrick #B22222
floralwhite #FFFAF0
forestgreen #228B22
fuchsia #FF00FF
gainsboro #DCDCDC
ghostwhite #F8F8FF
gold #FFD700
goldenrod #DAA520
gray #808080
green #008000
greenyellow #ADFF2F
honeydew #F0FFF0
hotpink #FF69B4
indianred #CD5C5C
indigo #4B0082
ivory #FFFFF0
khaki #F0E68C
lavender #E6E6FA
lavenderblush #FFF0F5
lawngreen #7CFC00
lemonchiffon #FFFACD
lightblue #ADD8E6
lightcoral #F08080
lightcyan #E0FFFF
darksalmon #E9967A
light lightgreen goldenrodyellow #90EE90 #FAFAD2
webdesign met css
pagina 11
Informatica
naslag
Webkleuren en hun bijbehorende RGB-waarden lightgrey #D3D3D3
