Sie sind hier: Startseite -> CSS-Grundlagen -> CSS-Einstieg -> CSS einbauen

CSS-Grundlagen: CSS einbauen

CSS-Einbau: Wohin mit dem Code?

CSS kann auf drei Arten in eine Webseite integriert werden. Der klassische Aufbau von CSS ist, wenn keine eigene Datei verwendet wird, so wie das erste Beispiel.

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.

  • 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.

Ebenfalls interessant:

CSS-Vorteile

Informationen über den Einsatz von CSS und der Unterschied zur Formatierung mit den veralteten HTML-Befehlen.

CSS-Hack

Informationen über den Einsatz von CSS-Hacks, um Fehler der Browser zu vermeiden.

[aktuelle Seite]

CSS einbauen

Informationen über die möglichen Wege, um den CSS-Code in die Webseite einzubauen.

CSS-Schreibweise

Informationen über die richtige Schreibweise bei CSS-Befehlen zur Formatierung einer Webseite.

Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Zurück zum Hauptthema

Übersicht CSS-Einstieg

Startseite CSS-Grundlagen