Sie sind hier: Startseite -> CSS-Grundlagen -> CSS-Vorteile

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.


Webhosting mit viel Software bei Alfahosting (Affiliate-Link)


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, sofern 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


Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)


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 einer 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.

Und besonders wichtig wurde das responsive Webdesign, wodurch sich eine Webseite automatisch an das Gerät anpasst. Zu Beginn des Webdesign gab es zwei Auflösungsgrößen am PC, mittlerweile gibt es 50 oder mehr verschiedene Auflösungen je nach Handyvariante und Betriebssystem. Mit CSS und Prozentwerte kann man die Seite so aufbauen, dass sie sich anpasst, ohne dass man einen Handgriff durchführen muss. Mit alter Technik ist das nicht zu machen und auch eigene Versionen für mobile Geräte funktionieren nicht, weil jedes Handy seine eigenen Dimensionen mitbringt.

Themenseiten

Diesen Artikel teilen

Infos zum Artikel

Vorteile von CSSArtikel-Thema: CSS-Vorteile bei der Gestaltung von Webseiten
Beschreibung: Mit 👍 CSS kann man zentral riesige Webseiten formatieren und in ✅ Minutenschnelle auch anpassen und verändern.

Kategorien

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

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