05.12.2005, 00:00 Uhr Hinweis: Wir haben in diesem Artikel Provisions-Links verwendet und sie durch "*" gekennzeichnet. Erfolgt über diese Links eine Bestellung, erhält t3n.de eine Provision.

Ergänzend zu dem Artikel von Jochen Weiland über den Aufbau einer Website mit TYPO3 in dieser Ausgabe, soll hier am Beispiel einer Navigationsleiste die Verwendung von CSS in TYPO3 vermittelt werden.

CSS mit TYPO3 verwenden

Generell lassen sich CSS-Anweisungen auf drei Arten in HTML-Dokumente einbinden:

1. Als Inline-Styles für HTML-Elemente:

<strong style="font-weight: bold;">Text</strong>

2. Als Styles im Kopfbereich der HTML-Datei:

<style> 
   strong { font-weight: bold; }
</style>

3. Als verlinktes oder eingebundenes Stylesheet:

<link xhref="stylesheet.css" rel="stylesheet" type="text/css" />
<style>
   @import url(stylesheet.css);
</style>

Während die erste Methode nur in wenigen Fällen geeignet ist, kommen
bei TYPO3-Websites Styles im Kopfbereich und verlinkte Stylesheets
häufig vor. Die TypoScript-Anweisung zum Einbinden eines Stylesheets im Kopfbereich lautet:

page.stylesheet = stylesheet.css

Diese Methode hat jedoch einige Nachteile – so lassen sich keine
individuellen Titel oder rel-Attribute für die Stylesheets vergeben. Stattdessen wird
auf eine universellere Methode zurückgriffen, mit der beliebige
Zeichenfolgen in den Seitenkopf
geschrieben werden können: