Zentrale Designinformationen

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Wie bereits erklärt, verwendet man CSS am besten, indem man Stilregeln in separaten .css-Dateien bereitstellt. Solche externen Stylesheets werden dann auf den entsprechenden HTML-Seiten über ein <link>-Tag angebunden. Alle Anweisungen, die das Aussehen einer Website bestimmen, befinden sich somit an einer zentralen Stelle und sind nicht mit dem Inhalt der Seite durcheinandergewürfelt.

Dadurch können Sie den Inhalt Ihrer Seite ändern, ohne das Aussehen zu verändern und umgekehrt. Im traditionellen Webdesign werden die Code-Anweisungen dieser beiden Grundbestandteile durch die Funktionsweise und Syntax von HTML-Tags und -Attributen vermischt. Will man nur eines der beiden verändern, muss man zugleich das andere beachten und gegebenenfalls entsprechend mitverändern, um eine einwandfreie Darstellung der Seite zu gewährleisten. Aussehen und Inhalt sind in reinem HTML untrennbar aneinander gekoppelt.

Trennt und speichert man Code für verschiedene Zwecke an verschiedenen Orten, nennt man das in der Welt der Programmierer entkoppeln. Werden Darstellung und Inhalt entkoppelt, kann ein Webdesigner das Aussehen einer Website in der .css-Datei verändern, während ein Autor seine Inhalte ausschließlich in die .html-Datei eingibt.

Noch bedeutender als die Vorteile für die einfachere und besser im Teamwork organisierbare Arbeit an Websites ist die deutliche Reduzierung duplizierten Codes, wenn man CSS einsetzt. Soll etwa in HTML-Design die Überschrift eines jeden Absatzes mit großer, roter Schrift dargestellt werden, muss jedes <h1>-Tag auch ein <font>-Tag enthalten. Mit CSS-Design definiert man die Schrifteigenschaften für alle <h1>-Tags nur an einer Stelle und spart damit deutlich an Arbeitsaufwand. Auch ein Redesign wird mit CSS deutlich einfacher: Wenn man die Darstellung der Überschriften verändern möchte, muss nur eine Stilregel in der CSS-Datei bearbeitet werden und nicht jedes einzelne HTML-Tag in jedem HTML-Dokument, sonst werden Sie verrückt! Die Unterschiede zeigt die folgende Abbildung.

CSS stellt den Designcode für eine ganze Webseite an einer zentralen Stelle bereit

Abbildung: CSS stellt den Designcode für eine ganze Webseite an einer zentralen Stelle bereit.

In der obigen Abbildung kann man deutlich erkennen, dass mit der CSS-Version der Website weniger Code geladen werden muss als mit der reinen HTML-Version. Besonders bei professionellen Websites mit vielen Designelementen und einer großen Anzahl an Unterseiten wirkt sich das vorteilhaft auf die Wartezeiten und Onlinekosten für den Benutzer aus.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg