Was ist CSS und wie funktioniert CSS?
CSS ist eine sehr leistungsfähige Ergänzung zum klassischen HTML. Erst CSS bietet Ihnen viele Gestaltungsmöglichkeiten, die mit reinem HTML entweder gar nicht oder zumindest sehr mühsam möglich waren. CSS ist gerade mit Blick auf die Suchmaschinen-Positionierung heute fast unverzichtbar. Es verwendet zwar (leider!) eine eigene Syntax, ist aber nach kurzer Einarbeitung schon bald passabel zu handhaben.
CSS ist das Werkzeug für anspruchsvolle Gestaltung im Web
CSS ist die Abkürzung von Cascading Style Sheets und bedeutet soviel wie "aufeinander hierarchisch aubauende Stil-Vorlagen". Das klingt natürlich ganz grausam kompliziert - ist es aber zum Glück nicht wirklich, weil man mit CSS auch ganz bescheiden im Kleinen anfangen und erst später schrittweise ausbauen kann. Es gibt verschiedene Möglichkeiten, wie man CSS nutzen kann. Die bei weitem interessanteste besteht darin, dass man mehrere Vorgaben zusammen gefasst in einer eigenen Datei ablegt. Diese Datei kann man mit einem einzigen HTML-Tag aufrufen und so einbinden, dass alle darin enthaltenen Vorgaben in der ganzen HTML-Datei ausgeführt werden.
Im Beispiel links soll die Datei mein.css eine Sammlung von CSS-Anweisungen enthalten, die wir für unsere HTML-Dateien verwenden möchten. Dazu genügt es, wenn im Head-Bereich der drei HTML-Dateien das oben stehende HTML-Tag eingefügt wird.
Die Aussage dieses Tags ist folgende: Binde die Datei vom Typ stylesheet mit dem Namen mein.css ein. Bei dieser Datei handelt es sich um Text. Dieser Text soll als CSS interpretiert werden.
Eine solche CSS-Datei kann auch sehr umfangreich sein und für die Darstellung der Seite Festlegungen bis ins kleinste Detail enthalten. Die für CSS benutzte Syntax, auf die wir noch ausführlich in späteren Lektionen kommen werden, ist neuer als HTML und berücksichtigt deshalb die Wünsche der Webdesigner nach mehr Einfluss auf die Darstellung wesentlich besser. Besonders leistungsstark wird dieses Werkzeug aber dadurch, dass viele Festlegungen (z.B. Schriftart, -farbe, -größe usw. für H1-Überschriften) in der externen CSS-Datei abgelegt werden und nur ein einziges Mal geschrieben werden müssen. Durch das Einbinden der Datei im Kopfbereich vieler HTML-Dateien werden diese Festlegungen wie von Geisterhand gleich für viele HTML-Seiten übernommen. Für eine spätere Änderung (z.B. die Textfarbe von rot auf blau ändern) genügt eine einzige kleine Korrektur in der externen CSS-Datei, und alle HTML-Dateien, die diese CSS-Datei eingebunden haben übernehmen sofort automatisch diese Änderung.
CSS-Stylesheets für die Trennung von Inhalt und Gestaltung
Erst die konsequente Trennung von Inhalt und Gestaltung macht die Arbeit mit CSS wirklich flexibel. Inhalt meint dabei den HTML-Code und Gestaltung den Teil des Codes, der mit CSS geschrieben ist. Dazu ist es nötig, dass der CSS-Code in eine oder mehrere Stylesheets zusammengefasst vorliegt und nicht auf einzelnen Seiten in den HTML-Code eingestreut.
CSS bietet wesentlich mehr und fast auf den Punkt genau ausgerichtete Gestaltung als dies reines HTML erlauben würde. Die Einschränkung »fast« hängt davon ab, wie viel Aufwand man treiben mag. Die verschiedenen Browser und Browserversionen setzen nämlich die CSS-Anweisungen nicht ganz gleich um. Wem es wirklich darauf ankommt, der kann dieser kleinen Unexaktheit durch so genannte Browserweichen begegnen, was aber nicht gerade wenig Zusatzarbeit bedeutet.
Das CSS-Box-Modell
Eine weitere große Stärke von CSS ist das so genannte Boxen-Modell, mit dem Seitenbereiche definiert und positioniert werden können. Im HTML-Code muss dafür nur durch wenige Zeichen Code kenntlich gemacht werden, zu welcher Box der folgende Inhalt gehört. Wie das nachher aussieht (jede Box kann detailliert gestaltet werden) und an welcher Stelle auf dem Bildschirm die betreffende Box erscheint, ist im CSS-Stylesheet festgelegt - eine wirklich feine Sache!
Beschränkt auf reines HTML sind bereits für ein durchschnittlich komplexes Seitenlayout oft schon sehr unübersichtliche und umständlich zu pflegende Tabellenstrukturen nötig. Mit CSS wirft man diesen unzweckmäßigen Ballast über Bord, und es sind auch Dinge möglich, die mit HTML allein gar nicht gingen (z.B. die Überlagerung mehrerer Objekte).