In de onderstaande cursus kunt u leren hoe u een stylesheet maakt. Een stylesheet is een bestand waarin de opmaak van de pagina kan worden aangegeven.
1) Als eerst maakt u een nieuw kladblok bestand aan. Hiervoor dient u kladblok te openen door te klikken op start --> programma's --> bureau-accessoires --> kladblok
2) Het kladblok komt nu naar voren en u dient de volgende tekst hier in te plakken:
a:link { color: #8C0001; text-decoration: underline; background-color: transparent }
a:visited {background : transparent; color : #000000; text-decoration : underline;}
a:hover { color: #8C0001; text-decoration: none }
a:active { color: #8C0001; text-decoration: none }
a.navigatie:link { font : bold 10px; font-family : Verdana, Helvetica, sans-serif; text-decoration : none;}
a.navigatie:visited {font : bold 10px; font-family : Verdana, Helvetica, sans-serif;text-decoration : none;}
a.navigatie:hover {color : #C00000; font : bold 10px; font-family : Verdana, Helvetica, sans-serif;text-decoration : none;}
a.navigatie:active {font : bold 10px; font-family : Verdana, Helvetica, sans-serif; text-decoration : bold;}
body { scrollbar-3dlight-color: #8C0001; scrollbar-arrow-color: #860A0A; scrollbar-base-color: #FFFFFF; scrollbar-darkshadow-color: #860A0A; scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #000000; scrollbar-track-color: #ffffff }
p, table, td {color : #000000;font-family : Verdana, Helvetica, sans-serif;font-size : 8pt;}
H1 { color: #8C0001; font-size: 18pt; font-family: Verdana, Helvetica, sans-serif }
H2 { color: #8C0001; font-size: 16pt; font-family: Verdana, Helvetica, sans-serif }
H3 { color: #8C0001; font-size: 14pt; font-family: Verdana, Helvetica, sans-serif }
H4 { color: #8C0001; font-size: 12pt; font-family: Verdana, Helvetica, sans-serif }
H5 { color: #8C0001; font-size: 10pt; font-family: Verdana, Helvetica, sans-serif }
H6 { color: #8C0001; font-size: 8pt; font-family: Verdana, Helvetica, sans-serif }
H7 { color: #8C0001; font-size: 14pt; font-family: Verdana, Helvetica, sans-serif }
H8 { color: #8C0001; font-size: 12pt; font-family: Verdana, Helvetica, sans-serif }
H9 { color: #8C0001; font-size: 10pt; font-family: Verdana, Helvetica, sans-serif; text-decoration: bold}
H10 { color: #FFFFFF; font-size: 8pt; font-family: Verdana, Helvetica, sans-serif; text-decoration: bold}
Input { color: #000000; font-size: 8pt; font-family: Verdana, Helvetica, sans-serif; background-color: #FFFFFF }
textarea { color: #000000; font-size: 8pt; font-family: Verdana, Helvetica, sans-serif; background-color: #FFFFFF }
hr { size : 1pt; color : #000000;}
3) In deze stap zullen we kort uitleggen wat de bovenstaande termen allemaal inhouden:
- In het eerste kopje wordt gebruikt gemaakt "a:" dit geeft aan wat er met de links moet gebeuren als deze aanwezig zijn op de pagina in de regel " a:link { color: #8C0001; text-decoration: underline; background-color: transparent } " wordt een link rood gemaakt met een lijntje eronder.
Voor elke "a:" regel kunt u opties veranderen zoals kleur en lettertype, het beste kunt u hier zelf mee expirimenteren om te kijken hoe de kleuren van de links uitkomen op uw pagina.
- Het tweede kopje geeft aan wat het uitelijk van de scrollbar aan de zijkant van de pagina moet zijn, hiervoor dient u kleurcodes op te geven in hexdecimale getallen. Een overzicht van de HEX codes kunt u hier vinden.
- In het derde kopje vindt u de H1 t/m H10 kleuren. Deze kunt u gebruiken om de opmaak van uw pagina's te regelen. H1 is heel groot, en H10 is heel klein. Wanneer u een tekst binnen het HTML gedeelte van uw pagina tussen deze koppen zet wordt de tekst aangepast aan de grote die in de stylesheet is opgegeven. Voorbeeld:
deze tekst staat in style H1
<H1> deze tekst staat in style H1 </H1>
De tekst wordt nu weergegeven in de kleur rood, met een puntgrootte van 18 in het lettertype Verdana.
- Het laatste kopje van de stylesheet geeft de kleur van de invulboxen, tekstgebieden en lijnen aan.
4) U kunt nu de stylesheet opslaan. Klik hiervoor binnen kladblok op " bestand opslaan als "
Selecteer in het opslagvenster " opslaan als : alle bestanden (*.txt). " en geef een bestandsnaam aan.
In deze cursus heb ik de stylesheet: style.css. Het is erg belangrijk dat u .CSS achter de bestandsnaam zet anders is de indeling onjuist.
5) De laatste stap is het activeren van de stylesheet binnen uw website. U dient het onderstaande stukje code op te nemen in de pagina van uw website:
<LINK HREF="style" REL="stylesheet" TYPE="text/css">