CSS: Einbindung

Erstellt: 18.04.2006 | Aktualisiert: 05.01.2009

Es gibt einige Möglichkeiten Stilanweisungen mit einem XHTML-Dokument zu verknüpfen. Diese können als direkte Anweisung in einem XHTML-Element notiert, im Kopfbereich des XHTML-Dokumentes angegeben oder als externe Stylsheet-Datei auf unterschiedlichen Weise verknüpft werden.

Einbinden im XHTML-Element

<p style="color: red; font-weight: bold;">Rot gefärbter und fetter Text</p>

Die Stil-Anweisung über einen so genannten Inline-Style im Start-Tag eines Elementes eignet sich insbesondere für einmalige Formatierungen. Ansonsten sollten Anweisungen dieser Art mittels Zuweisung einer class oder id und einer der untenstehenden Verknüpfungs-Methoden geschrieben werden.

Einbinden im Dokumentkopf

<style type="text/css">
p {color: red; font-weight: bold;}
</style>

Für die spezielle CSS-Formatierung einer einzelnen Seite bietet sich die Einbindung mittels style-Element im Dokumentkopf an. Die Formatdefinition type="text/css"muss dabei unbedingt angegeben werden.

Einbinden als verlinkte Datei

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

Externe Stylesheets werden mittels link-Element ebenfalls im Dokumentkopf mit dem XHTML-Dokument verknüpft. Das media-Attribut ermöglicht die Definition spezifischer Stylesheets für unterschiedliche Ausgabemedien.

@import url("style.css") print;

Über die so genannte @import-Regel lassen sich ebenfalls Stylesheets mit einem XHTML-Dokument verknüpfen oder in ein anderes Stylsheet importieren. Diese lassen sich auch auf bestimmte Ausgabemedien beschränken.

Verwandte Snippets

Weblinks