Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » CSS lernen » Trennung Inhalt Design

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

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe