Sie sind hier: Startseite -> HTML-Grundlagen -> Inhalt (Body-Tag) -> Body + CSS-Datei

HTML-Grundlagen: Body-Tag mit CSS-Datei

Body-Tag mit CSS-Datei formatieren

Auf der vorherigen Seite habe ich die Möglichkeiten aufgezeigt, mit alten HTML-Angaben den body-Tag auszustatten oder per CSS die Formatierung vorzunehmen. Nachstehend folgt nun ein Beispiel, wie dies mit einer externen CSS-Datei erfolgen kann und eigentlich auch sollte.



Das Beispiel ist die gleiche Seite wie im Artikel davor und hat nur einen Satz Inhalt, aber darum geht es gar nicht. Fakt ist, dass die große Veränderung zu den zuvor präsentieren Möglichkeiten, den Inhalt der HTML-Seite generell zu formatieren, darin besteht, dass eine externe Datei eingebunden wird.

Typischerweise nennt man sie styles.css, sie könnte aber auch heute_nicht.css lauten. Da in der Datei die styles, also die grafischen Vorgaben festgelegt werden, hat sich der Name styles eingebürgert. Durch den link-Befehl wird die Datei eingebunden und dieses Konzept ist elementar. Die Befehle, die im zweiten Teil beginnend mit body { angeführt sind, werden in der styles.css gespeichert und beinhalten ziemlich genau die gleichen Befehle, wie im letzten Artikel.

Dadurch, dass per externer CSS-Datei die Formatierung vorgesehen ist, entfallen sämtliche Zusätze beim body-Tag selbst. Denn dieser erhält sein Aussehen durch die Befehle via CSS-Datei. Das bedeutet auch, dass jede Änderung der vorgesehen Hintergrundfarbe in der Datei automatisch nach dem Speichern und Aktualisieren die HTML-Datei ändert.

Und das ist der wesentliche Vorteil gegenüber der bisher vorgestellten Lösungen, weil man 20 oder auch 200 Unterseiten mit einem Schlag ändern kann. Stellen Sie sich vor, Sie beginnen mit einer kleinen Hobbyseite mit zehn Seiten Inhalt. Die Leute finden die Seite aber und finden sie sogar gut und Sie basteln weiter - plötzlich haben Sie 50 Seiten und möchten die Hintergrundfarbe ändern - wenn Sie eine CSS-Datei eingebunden haben, brauchen Sie dafür fünf Minuten. Haben Sie die Hintergrundfarbe in jeder Datei im body-Tag festgelegt, müssen Sie alle 50 Seiten manuell überarbeiten. CSS erscheint am Anfang lästig, hilft aber viel Zeit sparen und ist nicht wirklich schwierig.

Ebenfalls interessant:

Body + HTML/CSS

Informationen über die Möglichkeiten und Unterschiede bei der Formatierung einer HTML-Seite über das Body-Tag.

[aktuelle Seite]

Body + CSS-Datei

Informationen über die Möglichkeit, HTML-Dateien durch eine externe CSS-Datei zu formatieren.

Soziale Medien

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

Zurück zum Hauptthema

Übersicht Inhalt (Body-Tag)

Startseite HTML-Grundlagen