Extra bijlagen
Cascading style sheets
CSS stelt je in staat om alle stijlelementen van een website in één document onder te brengen. Dat wil zeggen dat je maar één 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.
CSS-code is browser vriendelijk. Het wordt ondersteund door alle nieuwe browsers en dit zorgt ervoor dat de pagina’s in alle browsers er hetzelfde uit zullen zien.
De CSS kan in het html-document worden geplaatst, maar meestal wordt gebruik gemaakt van een extern document (kladblok) en dit is ook vrijwel het gemakkelijkste om mee te werken.
Als je een stylesheet hebt gemaakt is het enige wat je hoeft te doen: een link aan brengen in html-document naar je stylesheet. Dit geldt voor iedere pagina!
Het stylesheet document bewaar je in dezelfde map als waar je ook de html pagina’s hebt geplaatst. Denk aan de extensie css en dus niet opslaan als txt
De link naar een stylesheet ziet er in de bron van de pagina zo uit:
<html>
<head>
<title>De titel van de pagina.</title>
<link href="stylesheet.css"
rel="stylesheet" type="text/css" />
</head>
<body>
Hier komt de inhoud van je pagina.
</body>
</html>Als je die link in iedere <head></head> van
je html pagina plaatst zal de opmaak vanalle pagina’s identiek zijn.
Laten we met een klein voorbeeld beginnen.
Een stylesheet maken waarin is vastgelegd dat de opmaak van de html
pagina moet
bestaan uit: achtergrondkleur, letterkleur, lettergrootte,
regelafstand, kleur van een link,
een effect als je op een link gaat staan met je muis en als laatste een
kopregel.
Kopieer het gedeelte tussen de lijnen ( zie hieronder) en plak dit in
het kladblok.
Sla het bestand op als stylesheet.css (je vindt dit bestand ook al kant
en klaar op de
CD: stylesheet.css In de map Cursus Kompozer 2009.
body { color: #52514b;
background-color: #e9ebb1;
font-family: Times, "Times New Roman", serif;
font-size: 12px;
line-height: 20px;
text-align: left;}
a:link {
text-decoration: underline;}
a:hover {
text-decoration: underline;
color: #990033;}
h1 {
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;
font-size: 20px;}
Maak een nieuwe blanco pagina aan in Kompozer en plaats in de head van je
pagina een link naar je stylesheet.
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
Sla de pagina op als stylesheet.html(normaal gesproken zou je voor een index
kiezen) en op dezelfde plaats waar ook je stylesheet is opgeslagen.
Type nu wat tekst, geef aan dat dit kopregel (kop1) moet worden, type
vervolgens wat gewone tekst en breng een link aan naar een internet pagina.
Als je de pagina weer opslaat en in de browser gaat bekijken dan zul je zien dat
de opmaak volgens de opdrachten in het stylesheet wordt weergegeven.
Je kunt vervolgens op internet veel meer en uitgebreidere informatie vinden over het
gebruik van stylesheets van vrij simpel, zoals deze oefening, tot hele complexe
stylesheets waar alle opmaak tot in de puntjes wordt geregeld. Je kunt dit voorbeeld
van een eenvoudige stylesheet gemakkelijk aanpassen, door eventueel het lettertype,
lettergrootte en kleur gebruik aan te passen aan je eigen wensen. Als CSS te
ingewikkeld voor je is of gewoon te veel tijd vraagt aan verdieping dan is het ook nog
mogelijk om een complete website, inclusief stylesheet (dit samen heet een template)
72
te downloaden via het internet. Deze zogenaamde templates voldoen aan de W3C
normen. Er zitten voorbeelden bij die absoluut de moeite waard zijn om te gebruiken.
Het kan je enorm veel werk schelen:
http://www.freecsstemplates.org/
http://www.free-css.com/
http://templates.arcsin.se/
http://www.opensourcetemplates.org/
Het is met KompoZer heel goed mogelijk om uitgebreide stijlbladen te maken, daarvoor heeft het alle gereedschap in huis. Maar omdat ook het maken van stijlbladen niet tot de basis behoort maar om echte extra studie vraagt, wordt het in deze cursus niet verder behandeld.
