Externe CSS definiëeren

Home

Style sheets extern definiëren

Het voordeel van style sheets wordt pas goed duidelijk als je de stijl sheets vastlegd in een apart bestand voor de hele website.
Dit bestand functioneert dan als een profiel of mal (template) voor alle pagina's, zodat je alleen nog in dit ene bestand de gewenste instellingen hoeft op te geven. Als je er bijvoorbeeld in vastlegt welke kleur de achtergrond moet krijgen, dan hoef je later alleen in dit bestand een nieuwe kleur op te geven en niet meer in elkke afzonderlijke HTML-pagina.

Style sheet aanwijzingen in een extern CSS-definitiebestand zijn hetzelfde als de definities de je intern in een HTML <STYLE>-tag opgeeft.

Het CSS-definitiebestand is een ASCII-tekstbestand die je met de extentie .css kunt opslaan, bijvoorbeeld als template.css
In elke HTML-pagina waarvoor je de CSS-definitie wilt gebruiken, voeg je het definitiebestand in het <HEAD>-gedeelte in met de aanwijzing

Voorbeeld:

Broncode template.css

A {
	text-decoration:none;	/* link niet onderstreept */
}
A:VISITED {
	color:#FF9900;
}
A:LINK {
	color:#FF3366;
}
.bg {
	background-color:#FFCCCC;
}
TABLE,TD {
	font-family:Arial,Helvetica;
	font-size:20pt;
	background-color:#00CCFF;
}
BODY {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}

Broncode van een HTML-pagina met extern CSS sheet:

<html>
<head>
<title>Externe CSS defini&euml;eren</title>
<link href="template.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="97%" border="1" align="center" cellpadding="0" cellspacing="0">
    <tr>
       <td class="bg">CPU</td>
       <td class="bg">Fabrikant</td>
    </tr>
    <tr>
       <td>68000</td>
       <td><a href="...">Motorola</a></td>
    </tr>
    <tr>
       <td>K6</td>
       <td><a href="...">AMD</a></td>
    </tr>
</table>
</body>
</html>

Resultaat van bovenstaande broncodes:

CPU	Fabrikant
68000	Motorola
K6	AMD

§ Tabellen, CSS en Netscape
Het is essentieel bij tabellen de afsluitende </td> en </tr> systematisch te gebruiken, want Netscape neigt er anders toe, de CSS definities te negeren.