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

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.

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.

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.

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.

Lesen Sie auch

Der CSS-Einstieg gelingt recht einfach, weil die Formatierungen der verschiedenen Seitenelemente auch recht einfach erfolgen können. Man braucht aber Disziplin, dass man immer auf gleiche Art und Weise arbeitet und nicht einmal in der CSS-Datei Abstände eingibt und einmal direkt beim Inhalt. Und man braucht eine einheitliche Art, mit CSS zu arbeiten.

In den ersten Jahren der CSS-Verbreitung brauchte es sogar Tricks wie den CSS-Hack, damit der Internet Explorer auch verstehen konnte, was man eigentlich von ihm will.

Davon abgesehen muss man wissen, wie und wo man die CSS-Definitionen einbauen kann, warum des Vorteile bringt, CSS extern zu betreiben und wie die richtige Schreibweise zu erfolgen hat.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel