CSS - der Weg zum erfolgreichen Layout

Jeder Internetauftritt verdient ein professionelles Aussehen und sollte den Besucher mit kurzen Ladezeiten schnellen Zugriff auf alle Informationen ermöglichen. Es reicht eine reine HTML-Programmierung nicht mehr aus. Wachsende Anforderungen an das Seitendesign verlangten neue Wege. Veränderungen bei der Suchmaschinen-Optimierung forderten ein Umdenken beim Quellcode-Aufbau. Meta-Tags können weiterhin im Head-Bereich aufgeführt werden. Jedoch für ein erfolgreiches Ranking wird der Meta-Tag „Keywords“ immer nebensächlicher. Die Wertigkeit der Suchmaschinen-Optimierung ist eher auf Seitentitel, Textpassagen, Linktexte und Link-URL ausgerichtet. Seiten mit ansprechend viel Text werden gegenüber textarmen von Suchmaschinen höher bewertet. Flash und Frames eignen sich nicht für die Auswertung. Bilddateien können unkompliziert für das Ranking optimiert werden. Diese Suchmaschinen-Problematik wird durch Stylesheets vereinfacht.

CSS ist die Abkürzung von Cascading Style Sheets und ermöglicht jeden Programmierer ein Stück „Freiheit“. Inhalt und Gestaltung werden voneinander getrennt. Es vereinfacht sich das Betreuen und Veröffentlichen der Webseiten. Der Quelltext begrenzt sich im Body-Bereich auf das Wesentliche, den Informationsinhalt mit der Dominanz einiger inhaltlich wichtiger Suchschwerpunkte. Die Formatierung der Webseite wird in entsprechende CSS-Dateien geschrieben und als Stylesheet im Head-Bereich der HTML-Datei eingebettet. Es existieren ebenfalls DSSSL, XSL(T), JSSS und FOSI als Stylesheet-Sprache, die nur wenig Bedeutung für Browser haben. Wenn nicht eine HTML-Syntax (z.B. body, p, h, a) definiert wird, erfolgt die Zuweisung der Formatierung über einen ID-Namen innerhalb eines Block-Elements (Bereich:

). Block-Elemente können ineinander verschachtelt werden. Jeder ID-Name sollte innerhalb einer HTML-Datei einmalig sein. Nur so sind eindeutige Zuordnungen der Syntaxdefinitionen aus der CSS-Datei möglich, die mit einer Raute (#) dort beginnen.

CSS-Programmierung bietet vielfältige Möglichkeiten, dem Webauftritt ein professionelles Layout zu geben. Die über HTML 3.2 hinausgehenden Möglichkeiten im Farb- und Schriftbereich sind nicht alles. Positionierungen auf einer festgelegten Koordinate der Webseite werden möglich. Box-Modelle können somit geschickt auf der Seite fest platziert werden, überlappend oder mit fest definierten Abständen zueinander. In den einzelnen Boxen werden Bilder und/oder Textpassagen eingelagert. Der Programmierer bestimmt exakt jedes einzelne Detail der Webseite und fixiert alles. Jeder Besucher genießt die gleiche optimale Ansicht, wenn erfolgreich alle Browserprobleme geklärt wurden. Hintergrundbilder können eingelesen werden. Jede Box kann dann ein eigenes Muster, Bild, einen Farbverlauf oder Uni-Farbigkeit präsentieren, ergänzt mit dem passenden Text. Jedoch ist hier ein dezentes Auftreten vorrangig. Schrille Farbigkeit nervt das Auge des Besuchers. Der eigene Webauftritt soll ein „echter Hingucker“ sein. Noch weitaus mehr Gestaltungsmöglichkeiten bietet CSS.

Wie jede Programmierungssprache hat CSS ebenfalls feste Regeln. Die Syntax stehen in geschweiften Klammern und bestehen aus einzelnen Regeln, verschiedenen Deklarationsbereichen, bestehend aus einer oder mehreren Deklarationen, die wiederum aus Eigenschaft und Wert sich zusammensetzen. Daraus ergeben sich Selektoren, z.B. ein HTML-Element oder ein ID-Begriff. Das klingt sehr wissenschaftlich und lässt sich auf eine einfache Formel reduzieren:
Selektor {Eigenschaft: Wert;}
Entsprechende Editoren erleichtern die korrekte Schreibweise und zeigen mit „Warnfarben“ auftretende Fehler sofort an. Externe Stylesheets ermöglichen ideal schnelle Layout-Veränderungen für den kompletten Webauftritt. Unterschiedliche CSS-Dateien können dem jeweilig genutzten Browser angepasst werden und unterschiedliche Syntax-Interpretationen abfangen. Vorranging Innen- und Außenabstände lesen einige Browser durchaus unterschiedlich.

CSS ist ein wichtiger Weg zum Erfolg, spart Zeit, reduziert Fehlerquellen, schafft Exaktheit.

Comments are closed.