Ästhetik im Design, Klarheit im Code
Über die Programmierung mit CSS

CSS steht für »Cascading Style Sheets«. Stylesheets sind eine Sprache zur Formatierung von HTML-Elementen und legen fest, wie Inhalte oder Bereiche dargestellt werden sollen. Mit CSS-Definitionen lassen sich Schriften formatieren, Hintergrundfarben und -bilder zuweisen, Elemente positionieren und vieles mehr.
Stylesheets wurden speziell als Ergänzung zu HTML geschaffen und sind vom Internet-Gremium W3C [World Wide Web Consortium] normiert. CSS-Design gehört neben vielen anderen Technologien zu den Webstandards.

Mit CSS lassen sich Form und Inhalt trennen. Der Seiteninhalt wird mit HTML-Elementen strukturiert – das Aussehen der Elemente wird zentral in einer externen CSS-Datei definiert: HTML schafft die Struktur, CSS legt optische Elemente darüber.
Dieses Prinzip ist sozusagen die »Mutter« aller Vorteile.

Die Vorteile von CSS

  • Werden die Stylesheets in einer separaten Datei notiert, verringert sich der Aufwand für Änderungen am Design beträchtlich, da sich die Arbeit auf die externe Formatvorlage beschränkt. Die Änderungen in der zentralen CSS-Datei werden von allen Dokumenten sofort übernommen.
  • Auch die Wartungskosten für inhaltliche Aktualisierungen auf den einzelnen HTML-Seiten reduzieren sich, da übersichtlicher Code wesentlich einfacher und schneller zu bearbeiten ist.
  • CSS bietet deutlich mehr Gestaltungsmöglichkeiten als reines HTML. Stylesheets eröffnen völlig neue Möglichkeiten und erlauben anspruchsvolle Website-Layouts. Umständliche Tabellen und transparente GIFs sind nicht mehr nötig; der Quellcode wird deutlich schlanker, die Entwicklung von komplexen Sites vereinfacht.
  • HTML-Dateien werden kleiner, wenn sie nur noch aus rein strukturellem Markup bestehen. Die Ladezeiten verringern sich zusätzlich, da das externe Stylesheet nur einmal heruntergeladen und dann im Browser zwischengespeichert wird.
  • Unterschiedliche Ausgabemedien können gezielt mit verschiedenen Stylesheets angesprochen werden. So lässt sich z.B. der Ausdruck auf Papier mit extra Anweisungen zu Seiten-Layout, Textfluss und Schrift und dem Ausblenden von Elementen sehr lesefreundlich gestalten.
  • Mit CSS lassen sich einheitliche Layouts auch für große Projekte umsetzen, denn die Formateigenschaften, die einmal zentral definiert werden, gelten für alle HTML-Dateien, die sich auf das Stylesheet beziehen. Das Corporate Design bleibt gewahrt.
  • Die Struktursprache HTML wird nicht durch Anweisungen, z.B. zu Schriftart, -größe und -farbe, »verunreinigt«. Stattdessen wird der Seiteninhalt mit logischen Elementen wie Überschriften, Absätzen, Listen, Zitaten etc strukturiert. So entsteht semantisches Markup [bedeutungsvoller Code | Semantik = Bedeutungslehre]. Inhalte werden gegliedert, logische Beziehungen hergestellt, Bedeutungen markiert: Eine Überschrift enthält relevante Informationen über den folgenden Text, ein Zitat eine Äußerung usw. Anders gesagt: Die Elemente werden nach ihrer Funktion bzw. Bedeutung ausgesucht und nicht nach ihrem Aussehen. Diese zweckorientierte Verwendung ist möglich, weil die Elemente mit CSS überschrieben werden.
  • Mit CSS ist eine Website sozusagen automatisch suchmaschinenfreundlich programmiert. Denn durch die schlanke Programmierung stehen die Suchwörter ganz weit oben im Quelltext. Gleichzeitig sind die Schlüsselbegriffe innerhalb derjenigen logischen bzw. semantischen Elemente platziert, die sie am besten beschreiben, was von den meisten Suchmaschinen bewertet wird.
  • CSS macht Websites benutzerfreundlich. Allein durch die Verwendung von gültigem Markup ist ein großer Teil W3C-Leitlinien für Barrierefreiheit [Zugänglichkeit] bereits erfüllt. Mit Stylesheets kann man Webseiten für sehschwache Menschen optimieren, z.B. indem man alternative Stylesheets mit vergrößerter Schrift oder kontrastreichen Farben anbietet. Die Ausgabe für Bildschirmlesehilfen wird bedeutend einfacher, weil die Inhalte logisch strukturiert und in ihrer natürlichen Abfolge auf der Seite stehen.