Stylesheet maken

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”>

Leave a Reply