CSS in die Webseite einbauen

Verknüpfung von Webseite und Formatierungen

Durch den Einsatz von CSS konnte nicht nur professioneller die Gestaltung der Webseite durchgeführt werden, man hat auch eine klare Trennung zwischen dem Code und Inhalt einerseits und der Darstellung andererseits erreicht. Um zentral Veränderungen durchführen zu können, braucht es eine externe Datei, auf die man die Webseite führen muss.

CSS kann auf drei Arten in eine Webseite integriert werden. Man kann direkt bei der Darstellung die CSS-Befehle anführen, aber damit müsste man alle Seiten manuell ändern, wenn man etwa die Farben anpassen will. Man kann im Kopfteil direkt die style-Befehle anführen, das ist aber abseits einer zentralen Index-Datei auch nicht ganz so optimal. Daher ist der dritte Weg der, der sich durchgesetzt hatte und zwar die Verlinkung zur externen Datei.

Mit CSS aktiv arbeiten

CSS im Kopfteil

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

Im Bereich des Style-Tags bringt man sämtliche CSS-Codes hinein, die auf der Seite zur Anwendungen kommen sollen. Damit ist der HTML-Code von CSS und etwaigen Formatierungen befreit und sauber und damit auch übersichtlicher und leichter zu lesen. Das gilt auch dann, wenn man beispielsweise mit PHP oder anderen Sprachen arbeitet.

Das Problem an der oben vorgestellten Lösung ist die Tatsache, dass man diese CSS-Vorgaben auf einer Einzelseite hat, es sei denn, der Header wird per PHP dynamisch eingebunden, aber davon wollen wir nicht ausgehen. Bei HTML-Seiten müsste man also bei Änderungen erst recht wieder alle Seiten manuell verändern, was nicht im Sinne des Erfinders ist.

CSS und HTML gemeinsam

CSS kann auch direkt bei den HTML-Befehlen eingebunden werden, das zeigt das zweite Beispiel.

Mit styles='' kann man beliebige CSS-Befehle integrieren. Damit stehen bereits zwei Möglichkeiten der CSS-Einbindung zur Verfügung - direkt beim HTML-Code oder im Header. Aber beide Lösungen sind keine wirklichen Lösungen, denn sie müssten manuell korrigiert werden, wenn man sich für eine Änderung des Layouts entscheidet. Und das passiert schneller als man glaubt. Außerdem wird der Code schnell unübersichtlich, vor allem bei umfangreichen Seiten.

CSS als externe Datei

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

Daher kann es nur einen professionellen Einsatz für CSS geben und das ist die eigene CSS-Datei. Diese ist als .css definiert, oft verwendet man styles.css als Dateiname. Eingebunden wird die Datei im Kopfteil jeder Seite, wie im dritten Codebeispiel gezeigt.

Mit dieser einen Zeile und dem Befehl link bindet man die CSS-Datei ein, was viele Vorteile mit sich bringt.

a) die Formatierung der Seite ist getrennt von der Programmierung
b) jede Änderung der Formatierung wirkt sich automatisch auf alle Seiten aus
c) wesentliche Zeitersparnis bei der Wartung der Seite

Man stelle sich vor, dass man 100 Links in einer neuen Farbe anzeigen möchte - bisher hätte man 100 Änderungen durchführen müssen. Mit CSS reicht die Änderung der entsprechenden Farbeinstellung. Mit der externen CSS-Datei gibt es viele Möglichkeiten, Zeit zu sparen, wenn man die Seite ändern möchte und zudem arbeitet man auf Basis moderner Erkenntnisse im Webdesign und lässt veraltete Darstellungen wie unsichtbare Bilder für Abstände oder dem font-Tag für Schriftartdefinitionen hinter sich.

Ein Profi-Tipp zum Schluss:

Wer große Projekte betreut oder seine eigene Seite umfangreich gestaltet, ist gut beraten, nicht auf einer CSS-Datei sitzen zu bleiben. Binnen kürzester Zeit verliert man den Überblick über die Befehle und ihren Nutzen und weiß auch nicht mehr, welche Absatzformatierung gehört wohin.

Man kann sich zwar mit Kommentaren ein wenig helfen, aber bei 300 Zeilen langen CSS-Dateien wird es trotzdem mühsam. Besser ist es, die Dateien aufzuteilen und CSS zu strukturieren. Beispielsweise könnte man eine CSS-Datei für die Formatierung der Navigation aufbauen, eine CSS-Datei für den Inhaltsbereich und eine CSS-Datei für die Servicespalte, die Fußzeile oder ähnliche Gestaltungsmittel.

Jede der CSS-Dateien ist mit dem oben vorgestellten Befehl im Kopfteil auf jeder gefragten Seite einzubinden.

Themenseiten

Startseite CSS-Grundlagen

CSS in die Webseite einbauen

Verknüpfung von Webseite und Formatierungen

Mit CSS aktiv arbeiten

CSS im Kopfteil

CSS und HTML gemeinsam

CSS als externe Datei

Diesen Artikel teilen

Infos zum Artikel

Kategorien

Interner Bereich