Trennung Inhalt und Design durch CSS

Ein extrem großer Vorteil von CSS ist die Trennung des Designs vom eigentlichen Inhalt, der in HTML-Dateien steckt. Das Design wird dazu in eine eigene Datei ausgelagert und kann dann für alle Seiten eines Internetauftritts verwendet werden. Werden dann Änderungen am Design gemacht, sind durch diese gemeinsame CSS-Datei sofort alle Einzelseiten auf dem neuesten Stand.

Trennung Inhalt und Design durch CSS Wie in der Grafik abgebildet sieht man den Unterschied zu der Erstellung von Websites in den „alten Tagen“. Früher wurde alles in eine Datei gepackt – HTML (in grün dargestellt) und Design (in rot dargestellt) und JavaScript (in lila dargestellt) und irgendwelcher Müll (in schwarz dargestellt) stecken in jeder Einzeldatei (und das immer und immer wieder). Das machte das Ganze extrem unübersichtlich und den Pflegeaufwand sehr hoch. Je mehr HTML-Seiten es gab, desto mehr Aufwand!

Auf der rechten Seite der Grafik sieht man, wie es heute gemacht wird. Heute steckt in der HTML-Datei primär HTML (grün) und im Kopf Verweise auf weitere Dateien (sprich die CSS-Datei für das Design und falls verwendet ein Verweis auf die JavaScript-Datei). Diese Dateien werden einfach von jeder HTML-Seite dazu geladen. Wird jetzt eine Änderung am Design gemacht, ist der Aufwand unabhängig von der Anzahl der HTML-Seiten. So macht die Pflege der Seiten Spaß.

Eine Seite - viele Gesichter

An folgendem Beispiel soll gezeigt werden, dass eine inhaltlich identische Seite vollständig unterschiedlich aussehen kann.

Das Zusammenspiel von CSS und HTML-Tags in den folgenden Kapiteln

Beispiele für identischen Inhalt und anderes Design