Webdesign-City.de - Cascading Style Sheets in die eigene Website einbauen, so gehts - CSS Formatierung in der HTML Seite

© Webdesign-City.de - powered by MAOTEC

> Webdesign-City > CSS > Style Sheets einbauen

CSS Formatierungen in der eigenen Website einsetzen

Es gibt zwei Möglichkeiten, CSS Formatierungen auf eine HTML-Seite anzuwenden. Zum einen kann man in der HTML-Seite Style Sheets einsetzen. In diesem Falle gelten die CSS Befehle nur für diese eine Seite. Dies empfiehlt sich nur bei kleineren Projekten, oder wenn man verschiedenen Seiten unterschiedliche Formatierungen zuweisen möchte.

Die zweite Variante ist das Erstellen einer zantralen Style Sheet Datei.
Die Formatierungen gelten hier für alle Dokumentem, die auf die Style Sheet Datei zugreifen. So ist es z.B. möglich, die Hintergrundfarbe aller Seiten mit nur einem CSS-Befehl zu steuern, und später auch wieder zu ändern...


Das Bild zeigt das die "beispiel.css" auf alle drei .html-Dateien zugreift.

Cascading Style Sheet in der HTML-Seite

Im <HEAD> Bereich jeder seite muss folgender Code eingefügt werden:

<style type="text/css" media="screen"> \\ Leitet die Formatierung ein
<!-- \\versteckt den code für ältere Browser
.testclass {} \\ Auflistung der CSS Formatierungen
-->
</style>


Zentrale CSS-Formatierung mit einer Style Sheet Datei

Um mit zentraler Dokumentenformatierung zu Arbeiten muss zuerst eine Style Sheet Datei Angelegt werden. Dies kann mit einem einfachen Texteditor geschehen. Die Datei muss mit der Endung .css abgespeichert werden und sollte sich zur besseren Auffindbarkeit im Hauptverzeichnis der Website befinden. (siehe Bild oben)

In der .css Datei werden dann alle nötigen CSS-Befehle nacheinander eingetragen.

In allen Seiten, für die die Style Sheet Formatierungen gelten sollen muss nun noch folgender Verweis im <HEAD> Bereich angelegt werden :

<link href="datei.css" rel="stylesheet" media="screen">


> Zurück zur Style Sheet Übersicht


Linktips: Handyangebote - SMS-Flatrate - DSL-Flatrates & DSL By Call