Ein Design besteht aus einem austauschbaren Satz an CSS- und Grafikdateien gemeint, mit dessen Hilfe eine spezielle optische Darstellung erzeugt wird.
Die CSS- und Grafikdateien werden in eindeutig unterscheidbare Verzeichnisse geschrieben, so daß bei einem Wechsel eines Designs es zu keinen Problemen kommt:
Die CSS-Dateien werden in dem Verzeichnis /css/Designname/ geschrieben, während die zu diesem Design gehörende Grafiken in das Verzeichnis /grafiken/Designname getan werden.

CSS-Dateien

In einem Design werden folgende CSS-Dateien definiert:

  • default.css

    Diese Datei enthält alle strukturellen Informationen des Designs. Das heißt, alle Definitionen zu vorgegebenen Seitenstrukturen, die mit Position, Breiten, Größen und anderen Eigenschaften zu tun haben. Eigenschaften, die Tags und Marken im Inhaltsbereich und Farben, Grafiken und Border betreffen, werden der besseren Organisation wegen ausgelagert in den beiden Dateien farben.css und elemente.css. Die beiden Dateien werden am Anfang der Datei default.css mit Hilfe der folgenden CSS-Anweisung eingebunden:

    @import url(/css/Designname/farben.css); 
@import url(/css/Designname/elemente.css);

  • farben.css

    In dieser Datei werden alle Grafiken, Farben und Border definiert.

  • elemente.css

    Diese Datei enthält alle Definitionen für Klassen und HTML-Anweisungen, die Teil des Inhaltsbereiches sind.

Alternativen für den Internet Explorer

Sofern notwendig, können auch alternative CSS-Dateien für den Internet Explorer erstellt werden. Bei Verwendung des Styleswitchers werden diese automatisch erkannt und bei Verwendung des Internet Explorers aufgerufen.
Die alternativen CSS-Dateien für den Internet Explorer müssen über einen eindeutigen Dateinamen haben, der folgender Namenssyntax gehorcht: 

default-((gte|lte|lt)-)ie(5).css

Die runde Klammern bezeichnen optional nutzbare Bedingungen. Die Bezeichnungen default und ie sind fest.
Beispiele:

  • default-ie5.css
    CSS-Datei nur für IE 5

  • default-lte-ie5.css
    CSS-Datei für alle IE bis zur Version 5

  • default-lt-ie5.1
    CSS-Datei für alle IE vor der Version 5.1

  • default-ie.css
    CSS-Datei für alle IE

Wird der Styleswitcher nicht verwendet, muß der zusätzliche Aufruf manuell in dem Kopfteil der Webseiten geschrieben werden.
Weiterführende Informationen zu den alternativen CSS-Dateien für den Internet Explorer können zum Bespiel bei dem Externer Link: SelfHTML-Artikel "CSS-Browserweichen zum Ausschließen älterer Browser" nachgelesen werden.

Stylesheets für andere Medien (Drucker, Handhelds und andere)

Die CSS-Dateien für die Ausgabe auf alternative Medien (Drucker, Handhelds und andere) liegen im Verzeichnis /css/. Da die Anweisungen in diesen Dateien keinen Einfluß auf die optische Gestaltung eines normalen Browsers (Medientyp Screen, Projection) haben, werden sie zentral vorgegeben und sind nicht Teil eines wählbaren Designs.

Weitere Stylesheets

Werden bei einem Design weitere Stylesheets benötigt, können diese über die @import-Anweisung eingebunden werden.

Grafiken

Alle Grafiken eines Designs werden im Verzeichnis /grafiken/Designname/ gespeichert.

Gestalterische Rahmenbedingungen

Da alle Webauftritte weitgehend barrierefrei sein sollen, gelten die Regeln bezüglich der Farbwahl und der Grafiken auch für die CSS-Designs. Dies bedeutet im wesentlichen:

  • Vordergrund- und Hintergrundgrafiken müssen mit einem ausreichenden Kontrast versehen sein
  • Es drüfen keine Farbkombinationen verwendet werden, die zu Problemen bei klassischen Fehlsichtigkeiten führen können (zum Beispiel Rote Schrift auf grünem Grund).
    Es wird empfohlen, daß jedes Design mit dem kostenfreien Programm ADesigner von IBM getestet wird.
  • Schriften müssen sich vergrößern oder verkleinern lassen. Bei einer Vergrößerung bis zu 150 Prozent sollten keine gravierenden Schäden am Design auftreten. Dasselbe gilt für Verkleinerungen bis zu 75 Prozent
  • Das Design soll sich flexibel auf die jeweilige Fenstergröße des Browser anpassen können und nicht eine feste größe für den Inhaltsbereich vorschreiben. Wohl aber kann eine Minimalbreite von 500 Pixel für den Inhaltsbereich bei der Darstellung auf Bildschirmen oder Projektionen vorausgesetzt werden.
    Es ist jedoch zu beachten, daß die Darstellung des Inhalts mittels Handheld möglich bleiben muss.