Importeren van stijlen
Wanneer je CSS gebruikt kun je dat op een aantal manieren doen. Je kunt een ingebedde stijl gebruiken, een intern stijlblad of een extern stijlblad. Wij zetten de verschillende mogelijkheden nog even op een rij.
Ingebedde stijl
Per html-element kun je stijlen toevoegen. Dit doe je door het attribuut ‘style’ mee te geven aan het element. Een voorbeeld:
Dit heeft het volgende als resultaat:
Let op, deze tekst valt op!!
Let er wel op dat je bijvoorbeeld :hover (mouseover actie) er niet in kunt zetten en dit dus nooit een
volledige stylesheet kan vervangen. Gebruik het meer voor incidentele acties.
Intern stijlblad
Bovenaan het xhtml-document kun je een volledig werkend stijlblad plaatsen. Nadeel hiervan is dat je alsnog iedere
pagina moet afgaan als er iets wijzigt in je stijl. Voordeel is dat je lay-out en inhoud bij elkaar houdt.
Weer een voorbeeld:
<html><head><title>Intern stijlen</title>
<style type=”text/css”>
h1 {color: red;}
p {font-size: smaller; color: red;}
</style>
</head><body>
…
</body>
</html>
Externe stijlbladen
De laatste optie is om je stijlbladen extern op te slaan, maak een aparte pagina aan met als uitgang ‘.css’.
Je kunt deze op een drietal manieren importeren, namelijk met @import, met het linkelement en als xml-stylesheet.
Deze laatste laten we even buiten beschouwing.
Wanneer je importeert via @import, dan gebruik je weer een intern stijlblad, waarin je aangeeft welke stijlpagina’s
er gebruikt moeten worden. Deze manier kun je ook gebruiken bij een stijlblad zelf, plaats @import dan bovenaan
de stijlpagina. Het voorbeeld:
<html><head><title>Intern stijlen</title>
<style type=”text/css”>
@import url(site.css);
@import url(links.css);
</style>
</head><body>
…
</body>
</html>
Tenslotte de manier met link element. Daarbij kun je ook bepalen voor welke media je stijl geschikt wordt.
<head>
<title>Een document</title>
<link rel=”stylesheet” type=”text/css” href=”stijl1.css” media=”all”>
<link rel=”stylesheet” type=”text/css” href=”stijl2.css” media=”print”>
</head>
