Webdesign besteht nicht nur aus Interfaces, Buttons und Bildern - auch Texte müssen ansprechend und lesefreundlich gestaltet werden. Wer das nicht beherzigt, wird nicht gelesen, so einfach ist das. Nun kennt aber HTML nur karge Möglichkeiten, um den Webdesigner zu unterstützen. Wer hier etwas auf die Beine stellen will, braucht Cascading Style Sheets (CSS).
CSS (Cascading Style Sheets) bietet nicht nur vielerlei Gestaltungsmöglichkeiten, auch die Handhabung der Seiten wird verbessert. Änderungen und Variationen lassen sich einfacher durchführen. Schauen wir uns das in einem Beispiel an. Standardschrift ist auf dem Monitor nicht sonderlich gut zu lesen, fast alle Webdesigner greifen inzwischen zu Schriften wie Verdana oder Anal (Helvetica heißt sie auf dem Mac). Natürlich muss bei dieser Gelegenheit auch die Größe der Schrift angepasst werden. Mit HTML sieht ein Absatz dann so aus:
Soweit kein Problem. Unglücklicherweise verlangt aber jeder Absatz eine neue Formatierung. Wird die Seite mal länger, dann bringt sie es schnell auf Dutzende oder gar Hunderte solcher Formatanweisungen, insbesondere dann, wenn die Texte in Tabellenzeilen liegen. Dann wird die Ladezeit immer länger und wenn man etwas ändern will, muss man es gleich an vielen Stellen tun. Das nervt, aber zum Glück gibt es CSS. Hier kann es seine Stärken voll ausspielen. Die Sache sieht dann so aus:
Die Formatanweisung wird in den Dateikopf gesetzt:
p ( font-family: Arial, Helvetica; font-size 12 px;)
</style>
Das sieht auf den ersten Blick etwas länger und auch komplizierter aus. Ist es aber nicht. Denn nun wird jeder Absatz, egal ob es nur zwei oder gar hunderte sind, in der gewünschten Schrift und Größe dargestellt. Wir haben einfach dem HTML-Tag
ein neues Format zugewiesen. Das klappt auch mit anderen Tags:
heißt: Alle fett ausgezeichneten Textpassagen in Blau.
bedeutet: Alle H1 Überschriften in der Schriftart Verdana. Damit lässt sich schon einiges bewegen, denn nun sind auch die Formatierungen möglich, die HTML gar nicht kennt. Zum Beispiel Blocksatz wie hier:
Die einzelnen CSS-Elemente werden einfach mit einem Semikolon voneinander getrennt. Man kann so viele Elemente in eine Zeile schreiben, wie man will, genauer gesagt so viele, wie benötigt werden. Die Reihenfolge spielt dabei keine Rolle. Besonders hilfreich ist es, den Abstand der Zeilen zueinander zu verändern. Damit wir ein Text nicht nur optisch interessanter, er ist auch besser lesbar Der Fachmann spricht vom “Durchschuss”.
Wie groß der Durchschuss ausfallen darf, is von der Schriftart, der Schriftgröße und der Zeilenlänge abhängig. Außer Angaben in Pixel sind auch Prozentwerte oder sogar Millimeterangaben erlaubt.
Externe Lagerhaltung
Eine häufig angewendete Praxis besteht darin, die Formate in eine separate Datei auszulagern. Das ist immer dann sinnvoll, wenn Ihr Projekt aus mehr als einer Seite besteht und Formate immer wieder vorkommen. Das ist übersichtlicher und man braucht nur eine einzige Datei zu ändern und folglich auch nur diese wieder auf den Server hoch zu laden. Beispielsweise die Schrift auf 500 Seiten zu ändern, ist mit einer CSS-Datei in 20 Sekunden komplett erledigt. Die Formate werden einfach in eine ASCII-Textdatei geschrieben und diese als style.css abgespeichert. Alle Änderungen werden hier gemacht. Damit der Browser weiß, wo die Formate zu finden sind, muss ein Link nach diesem Muster in jede HTML-Seite eingebaut werden. Platzieren Sie die Zeile im Dateikopf.
Die Datei kann beliebig benannt werden, und Sie können sogar mehrere davon verwenden einfach untereinander schreiben.
Text mit Verzierungen
Verzierungen kommen zum Einsatz, wenn man bestimmte Wörter oder Passsagen besonders hervorheben will. Es gibt zahlreiche Möglichkeiten. Allerdings sollte man nicht übertreiben und diese Techniken sparsam einsetzen. Um nur einen bestimmten Textteil zu ändern, muss man anders vorgehen. Eine gute Methode ist es, die Formatierung an Ort und Stelle einzubauen. Dazu dient . Einfach die gewünschte Stelle damit umklammern und die Formatierung wie im Beispiel hinzufügen:
Das Wort “Verzierung” erscheint im Browser nun mit einem gelben Hintergrund. Diesen Effekt nennt man Textmarker, Er ist sehr auffällig und entsprechend wirksam.
Sieht ähnlich aus, wirkt aber ganz anders. In diesem Falle wird das Wort mit einem feinen schwarzen Rahmen umgeben. Mit der selben Technik ließe sich auch eine größere Schrift, eine andere Schriftfarbe, eine Unterstreichung und vieles andere realisieren. CSS hält eine Fülle solcher Formatierungen bereit, die alle auf dieselbe Weise eingebunden werden und sich auch kombinieren lassen. Eine kleine Auswahl:
Überstrich, größer und fett:
Stärker unterstrichen (wenn unterstrichen, dann so, sonst könnte der Text mit einem Link verwechselt werden):
Doppelt unterstrichen:
Übrigens: Moderne Browser haben mit der Darstellung von CSS keine Probleme. Ältere Browser zeigen im Zweifel nichts an!
