Als je een erg grote site gaat maken zul je merken dat het lastig is als je iets kleins in de lay-out wil veranderen. Je moet het dan namelijk op elke pagina aanpassen. Dat is veel werk. Gelukkig kun je veel dingen centraal, in een bestand opslaan. Met CSS kun je bijvoorbeeld alle opmaak in een bestand zetten. Wil je dan op alle pagina's rode tekst in plaats van blauwe, dan hoef je dat maar op een plek te veranderen. Daar komt nog bij dat CSS veel meer mogelijkheden heeft dan HTML! Je kunt er veel mee wat je met gewoon HTML niet kan.
Tijd om aan de slag te gaan dus. Je kunt CSS op 3 manieren in je pagina stoppen. Je kunt het in een apart bestand stoppen dat eindigd op .css. We spreken dan over een stylesheet. Je kunt het ook in een speciaal gedeelte in de header zetten. Als laatste kun je het ook nog direct in de tag zetten. We bespreken eerst CSS in een apart bestand, we bespreken later de andere 2 mogelijkheden.
In dit voorbeeld maken we het bestand test.css aan. Hierin komt alle CSS. Vervolgens moet je vanuit elk bestand waar je de stylsheet wilt toepassen een koppeling maken. Dit doe je door deze tag in de header te zetten:
<link href="eennaam.css" rel="stylesheet" type="text/css">Vervolgens kunnen we beginnen met de stylesheet. We gaan eerst wat eenvoudige dingen invoeren. In tegenstelling tot HTML bestanden hoef je niet in te voeren waar het bestand begint en eindigd enzo. In de voorbeeld stylesheet stoppen we het volgende:
a:hover {Zoals je ziet wordt de link rood als je er met je muis overheen gaat. Dit komt door dat stukje in je stylesheet. Die zorgt ervoor dat alle links rood worden als je er met je muis overheengaat. We gaan nu even uitleggen hoe die stylesheet werkt. Je ziet als eerste a:hover. Die a betekend dat het eerstvolgende gaat over alle a-tags. Dit klopt, want een link is <a href="iets">tekst</a>. Een a-tag dus.
:hover geeft aan dat de volgende instructues alleen gelden over alle a-tags wanneer je er met je muis overheengaat. (hover is Engels voor overheen zweven, vrij vertaald) Dan zie je een accolade. (zo'n {-teken) De accolade geeft aan waar de opdrachten die bij a:hover beginnen, en de andere accolade ( deze: } ) geeft aan waar ze eindigen. Vervolgens zie je daartussen color: red;. Dit betekend dat de kleur (color is Engels voor kleur) van die link veranderd naar red, (rood dus) zoals je kunt zien in het voorbeeld. Vergeet ook de puntkomma aan het einde niet, anders werkt het niet goed..
Je hebt zojuist de standaard opbouw van een CSS element gezien. Zoals je in het voorbeeld ook hebt gezien kun je met CSS meer dan met HTML alleen, en kun je ook alle CSS opdrachten centraal opslaan, wat de hoeveelheid werk bij een wijzigiging verlaagd.
Waarschijnlijk heb je in je webpagina's nogal wat kleurtjes gebruikt. (anders wordt het zo saai) Nu gaan we alle kleurtjes verhuizen naar CSS. Ze staan dan niet meer in je pagina, maar in het CSS bestand. Dit doen we omdat je dan straks beter kunt werken met CSS, en het is makkelijker als alle informatie centraal is opgeslagen. Je hebt bijvoorbeeld deze body-tag:
<body bgcolor="black" text="white">In je CSS document wordt dat
body {Zoals je ziet is de schrijfwijze een beetje anders. Als je dit in je CSS bestand hebt geplaatst moet je de parameters uit je body-tag verwijderen. Anders werkt het niet. Hieronder vindt je een lijst met vertalingen:
| HTML | CSS |
|---|---|
| bgcolor="black" | body { background-color: black; } |
| text="white" | body { color: white; } |
| link="green" | a:link {color: green; } |
| alink="yellow" | a:active { color: yellow; } |
| vlink="blue" | a:visited { color: blue; } |
Je kunt declaraties in CSS ook afkorten, als je bijvoorbeeld meerdere dingen hetzelfde kleurtje wilt geven. Wil je bijvoorbeeld dat de gewone, actieve en de bezochte link alledrie groen zijn, dan doe je dat zo:
a:link, a:active, a:visited {In onze html tutorials wordt even aandacht besteed aan font om tekst op te maken. Het W3C, de regelorganisatie op het gebied van webpagina's, heeft eigenlijk liever niet dat je font gebruikt, maar in plaats daarvan de span-tag in conbinatie met CSS. Dit doe je door de span-tag een naam te geven, en deze dan in CSS op te maken. Als je dan rode tekst wil krijg je dit:
In je HTML bestandAls het goed is zou de tekst nu rood moeten zijn. Overigens mag je de naamvandespan wel veranderen, maar dan moet je die ook in je CSS bestand naar hetzelfde veranderen, anders werkt het niet meer.
Bij het opmaken en indelen van een pagina worden vaak div-tags gebruikt. Met deze tags kun je je website indelen in blokken, die je allemaal een andere achtergrond-kleur, tekstkleur, lettertype, lettergrootte en een positie ten opzichte van elkaar kunt geven. Daarom worden div-tags vaak gebruikt bij uitlijning. Ook zie je vaak dat er tabellen voor de uitlijning worden gebruikt, maar dat is niet de bedoeling! Tabellen zijn er voor data, en niet voor uitlijning. Daarbij hebben tabellen nog enkele nadelen.
We gaan nu een voorbeeld maken met alle mogelijkheden van div's maken. Hierin stellen we in het CSS bestand voor al die div's een randje in, zodat je kunt zien wat je doet.
CSS:
div.kop, div.inhoud, div.menu {
border: solid 1px black;
}
HTML:
<div class="kop">Hier staat de koptekst<br />
Welkom op PC-Tutorials.nl</div>
<div class="menu">Hier staat de menu tekst<br />
Menu: Home Turorials Weetjes Tools Forum</div>
<div class="inhoud">Hier staat de inhoud<br />
Bla Bla Bla Bla </div>
Als je bij het bovenstaande ook de rest van de verplichte tags neerzet krijg je zoiets: Klik hier om het voorbeeld te zien. Als het goed is zie je 3 omlijnde blokken met daarin tekst. We gaan die nu uitlijnen. Als je probeert de lay-out van onze website na te maken hoef je in het CSS bestand niet veel te wijzigen. Uiteindelijk krijg je deze CSS:
CSS:
div.kop {
border: solid 1px black;
}
div.menu {
border: solid 1px black;
float: left;
width: 130px;
}
div.inhoud {
border: solid 1px black;
margin-left: 140px;
}
Als je deze CSS met de vorige HTML combineert krijg je zoiets. Dat ziet er wel interresant uit! Je kunt zo heel makkelijk een mooie een overzichtelijke lay-out maken. We bespreken nu nog een aantal elementen die je kunt gebruiken om je lay-out aan te passen.
| CSS | Beschrijving |
|---|---|
| float | Plaatst een element links of recht van het venster. Mogelijke waardes: left en right |
| background-color | achtergrond kleur. Voor de mogelijke waardes kun je de bijlage kleuren lezen. |
| color | de voorgrond kleur. Alle tekst wordt in deze kleur weergegeven. Voor de mogelijke waardes kun je de bijlage kleuren lezen |
| font-family | Het letertype van je tekst. Ook hier kun je meerdere waardes opgeven. Voorbeeld: font-family: Verdana, Arial, Helvetica. |
| font-size | Tekst grootte in punten, pixels of em's. Bijvoorbeeld: 8pt |
| font-weight | Geeft aan hoe vet letters zijn. Enkele van de mogelijke waardes: normal en bold |
| text-decoration | De opmaak van een tekst. Mogelijke waardes: none, underline en overline |
| margin | Je kunt margin gebruiken om tussenruimte te maken. margin: 0px; zorgt er bijvoorbeeld voor dat er om het hele object geen tussenruimte zit. margin: 10px; zorgt voot 10 pixels tussenruimte. Dit kun je ook per zijde instellen, dit doe je met margin-left, margin-right, margin-top en margin-bottom. |
| padding | Je kunt margin gebruiken voor ruimte tussen de rand van een object en de inhoud ervan. Het werkt precies zo als het hierbovengenoemde margin, alleen dan padding in plaats van margin. |
Dan doen we er nu nog even een voorbeeldje bij. We gebruiken weer dezelfde HTML, maar nu CSS met een aantal kleurencombinaties erin.
CSS:
body {
background-color: #aaddff;
}
div.kop {
border: solid 1px black;
background-color: #00008f;
color: #ffffff;
}
div.menu {
background-color: #ffffff;
border: solid 1px black;
float: left;
width: 130px;
}
div.inhoud {
background-color: #ffffff;
border: solid 1px black;
margin-left: 140px;
}
Zie hier het resultaat. Zoals je kunt zien is het maken van webpagina's met DIV's en CSS veel makkelijker geworden, en je hebt veel meer mogelijkheden.
Zoals aan het begin van de tutorial al is gezegd is het ook mogelijk om CSS direct in de HTML te zetten in plaats van in een apart bestand. Dat gaan we nu bespreken. De eerste vorm is helemaal niet moeilijk. Je zet alles wat je tot nu toe in je CSS bestand propte nu tussen speciale tags. Dit zijn de style-tags. Deze style-tags moet je in de head-tags zetten. Je krijgt dan, gebruik makend van de voorgaande voorbeelden, dit.
HTML:
<html>
<head>
<title>De titel van je site</title>
<style type="text/css">
background-color: #aaddff;
}
div.kop {
border: solid 1px black;
background-color: #00008f;
color: #ffffff;
}
div.menu {
background-color: #ffffff;
border: solid 1px black;
float: left;
width: 130px;
}
div.inhoud {
background-color: #ffffff;
border: solid 1px black;
margin-left: 140px;
}
</style>
</head>
(Hier komt de rest van je site, maar voor het gemak hebben we dat even weggelaten)
Zoals je ziet is dat helemaal niet moeilijk! Maar we kennen ook nog een derde vorm, waarbij we de CSS in de tag zelf zetten. Dat gaat zo:
HTML:
<div class="kop" style="border: solid 1px black;background-color: #00008f;color: #ffffff;">Hier staat de kop tekst
Welkom op PC-Tutorials.nl</div>
<div class="menu">Hier staat de menu tekst
Menu: Home Turorials Weetjes Tools Forum</div>
<div class="inhoud">Hier staat de inhoud
Bla Bla Bla Bla </div>
Zoals je ziet moet je nu alle CSS declaraties in de style parameter zetten. Je hoeft dan ook niet aan te geven bij welke tag dat hoort, want je zet het al in de tag, en daarmee geef je dat al aan.
Hopelijk snap je nu hoe je CSS in een website moet zetten, en wat de kracht van CSS is. Momenteel ben ik bezig met een lijst op te bouwen die alle mogelijkheden van CSS bevat. Tot dan moet je even hiermee doen. Ik kan me voorstellen dat je iets niet snapt. Je kunt ons altijd om meer uitleg over iets vragen op het forum. Veel Succes!
