CSS-Vorteile bei der Gestaltung von Webseiten

Unterschied zu HTML-Einstellungen

Was ist nun der genaue Unterschied zwischen einer Formatierung mit HTML und einer mit CSS? Warum soll zweiteres viel besser sein? Solche Fragen stellen sich Anfänger immer wieder, weil sie so stolz sind, dass ihre Webseite gut aussieht und dann kommt der Validator und meldet 200 Fehler, weil es Definitionen auf der Seite gibt, die nicht mehr gültig sein sollen. Ok, gültig sind sie und funktionieren können sie auch noch, aber sie entsprechen längst nicht mehr dem Standard.

Formatierung übernahm CSS aus gutem Grund

In den ersten Jahren der Webseitengestaltung hatte man mit HTML direkt für jede Seite ein Dokument aufgebaut und auch die Schriftart direkt beim Befehl angeführt oder auch die Schriftfarbe. Bald wurde klar, dass dies mit CSS auch und sogar besser geht, vor allem als zentrale Befehlsliste.

Code 1:Textfarbe blau
Code 2:Textfarbe blau

Beide Formatierungen erzielen das gleiche Ergebnis, nur kommt CSS mit einem Tag weniger aus, weil der Font-Tag wegfällt. Allerdings bringt CSS in dieser Form wenig, weil wenn man auf jeder Unterseite auf die Idee kommt, aus der blauen eine rote Farbe zu machen, muss man bei dieser Form der Einbindung genauso jede Seite manuell nachbearbeiten.

Genau hier ist aber CSS mächtiger als die bisherige HTML-Formatierung, weil man CSS als eigene Datei auf dem Server bearbeiten kann. Im Kopfteil der HTML-Dateien gibt es nur den Link zur CSS-Datei und die Befehle der Datei werden auf der Seite eingebunden.

Einfach ausgedrückt: wenn man das obige Beispiel auf jeder Seite unter HTML eingebaut hat, muss man jede dieser Einstellungen manuell auf rot ändern, um beim Beispiel zu bleiben. Bei einer externen CSS-Datei braucht man nur die CSS-Datei ändern und alle Texte mit der Farbeinstellung werden automatisch übernommen, soferne sie richtig definiert werden, also die Klassen erkennbar sind. CSS ist damit nicht eine zusätzliche Quälerei für Programmierer, Webdesigner und Hobby-Bastler, sondern ein mächtiges Werkzeug, das viel Zeit sparen hilft. Allerdings braucht es ein wenig Übung, um CSS richtig anwenden zu können.

Mit CSS kam das professionelle Webdesign

Dazu kommen weitere Faktoren, die als Vorteile für CSS zu nennen sind. Es ist nicht nur so, dass man das Layout von der Programmierung ener Webseite trennen kann, man kann auch barrierefrei programmieren. So ist es mit CSS möglich, ein Layout basierend auf Ebenen aufzubauen, das für Menschen mit Sehbehinderung einfacher zu benützen ist als die alte Layout-Tabelle. Und die schlimmen Konstruktionen mit unsichtbaren Bild, um bestimmte Abstände herstellen zu können, sind sowieso ein Fall für die Vergangenheit des Webdesign.

Außerdem kann man mit CSS eigene Stylesheets erzeugen, die für bestimmte Medien gedacht sind. So kann man eine druckerfreundliche Version basteln, die alle Bilder unsichtbar macht, die auf der Webseite existieren, um den Besucherinnen und Besuchern unnötigen Verbrauch von Druckertinte zu ersparen.

Lesen Sie auch

Der CSS-Einstieg gelingt recht einfach, weil die Formatierungen der verschiedenen Seitenelemente auch recht einfach erfolgen können. Man braucht aber Disziplin, dass man immer auf gleiche Art und Weise arbeitet und nicht einmal in der CSS-Datei Abstände eingibt und einmal direkt beim Inhalt. Und man braucht eine einheitliche Art, mit CSS zu arbeiten.

In den ersten Jahren der CSS-Verbreitung brauchte es sogar Tricks wie den CSS-Hack, damit der Internet Explorer auch verstehen konnte, was man eigentlich von ihm will.

Davon abgesehen muss man wissen, wie und wo man die CSS-Definitionen einbauen kann, warum des Vorteile bringt, CSS extern zu betreiben und wie die richtige Schreibweise zu erfolgen hat.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel