Cascading Style Sheets

Plaatsing

e kunt style sheets op vier manieren aan je HTML-pagina koppelen:

Inline style
Een embedded style sheet
Een extern style sheet
Een imported style sheet

Inline style
Door het attribuut style te gebruiken voor een HTML-code pas je een inline style toe:

<p style="font-size: 22pt;
 line-height: 40pt;
 color: maroon;">
 Hans Werksman</p>

Hans Werksman

Een embedded style sheet
Een embedded style sheet geldt voor één bestand . Je neemt het style sheet op in de <head> van je HTML-pagina:

<html>
<head>
<style type="text/css">
<!-- 
Hier komen de codes
 -->
</style>
</head>

Het geheel staat tussen  (commentaar) code. Dit betekent dat het style sheet genegeerd zal worden door oude browsers die er niet mee overweg kunnen. Doe je dat niet, dan worden alle codes als gewone tekst op het scherm getoond.

Een extern style sheet
Maak een bestand waarin je alle codes van je style sheet zet. Bewaar dit bestand met de extensie *.css (cascading style sheet). Je roept het vervolgens aan in de <head>:

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

Het grote voordeel is dat als je het style sheet op deze manier in alle pagina's aanroept je voortaan met het wijzigen van het style sheet het uiterlijk van je hele site in één klap kunt veranderen.

Een imported style sheet
Het is mogelijk om style sheets met elkaar te koppelen. In het externe style sheet worden andere style sheets geïmporteerd. Je verbindt ze door middel van @import binnen de style codes:

<link href="webmees.css"
 type="text/css" rel=StyleSheet>
<style type="text/css">
<!-- 
    @import url(ander1.css) 
    @import url(ander2.css) 
    @import url(ander3.css) 
-->
</style>

Op deze manier kun je bepaalde onderdelen van je site een afwijkend uiterlijk geven.