CSS - Aanroepen Cascading Style Sheet


Met CSS kun je de opmaak van je pagina's bepalen en zodoende de opmaak van de structuur volledig scheiden. Er zijn twee manieren om CSS toe te passen, de eerste manier is door de opmaak rechtstreeks in de <head> van een pagina te plaatsen (embedded) en de tweede manier is door de opmaak in een extern bestand te plaatsen (Linked). Nadeel van het plaatsen van de opmaak direct in de code van de pagina zelf is dat de opmaak dan alleen van toepassing is op de betreffende pagina terwijl als de code in een extern bestand staat de opmaak voor een volledige website gebruikt kan worden.

Een ander voordeel van het gebruiken van een bestand is dat wijzigingen zo direct voor de gehele website doorgevoerd kunnen worden. Denk bijvoorbeeld aan ander lettertype of mogelijk zelfs een nieuwe layout, je hoeft dan dus niet alle pagina's apart aan te passen. Ook een voordeel is dat de broncode van de pagina een stuk korter en schoner blijft.

Embedded Stylesheet

Als eerst de embedded stylesheet, deze gebruik dus in een HTML pagina zoals hieronder. De openingstag is <style type="text/css"> en de sluitingstag </style>. De code plaats je vervolgens in de head sectie van de pagina en dit komt er dan zoals hieronder uit te zien.

<!doctype html>
<html lang="nl">
        <head>
                <title>Mijn website</title>
                <style type="text/css">
                p {
                        font-size: 10 pt;
                        font-family: Arial, Helvetica, sans-serif;
                        color: #000000;
                }
                </style>
        </head>
        <body>
                <p>Dit is tekst opgemaakt door de CSS in de head</p>
        </body>
</html>


De CSS code die in het voorbeeld wordt aangegeven is voor de tekst, de P staat voor paragraph. Binnen de haken staan het lettertype aangegeven en de kleur is ingesteld op zwart. Achter elke eigenschap zet je zoals hierboven een afsluiting met een punt komma; In de body omring je de tekst met P tags <p>Mijn tekst</p> om de opmaak toe te passen.

Linked Stylesheet

De Linked Stylesheet is het externe bestandje en dit heeft de voorkeur om te gebruiken. Het bestandje word aangeroepen vanuit binnen head met de onderstaande code. Het bestandje heeft de extensie .css en heet hieronder in het voorbeeld stylesheet.css.

Je gebruikt dezelfde manier van schrijven voor de codes echter is het gebruik van de tags <style type="text/css"> en </style> niet nodig zoals hierboven. Alleen het gedeelte wat tussen de tags staat zoals hieronder in het voorbeeld plaats je in het CSS bestand.

p {
        font-size: 10 pt;
        font-family: Arial, Helvetica, sans-serif;
        color: #000000;
}


De code om het bestand aan te roepen.

<link href="stylesheet.css" rel="stylesheet" type="text/css" />