tintenstrahldrucker.org
Unter tintenstrahldrucker.org befindet sich eine Webseite auf der unterschiedliche Tintenstrahldrucker angeboten werden. Im dazu gehörigen Stylesheet (screen.css) das im Ordner templates/tintenstrahldrucker/css/ abgelegt ist, werden die einzelnen CSS Befehle, die die Browser für die korrekte Darstellung der Seiten benötigen, aufgelistet.
Im Fall von www.tintenstrahldrucker.org ist die CSS-Datei sehr übersichtlich gestaltet und in eine Reihe von unterschiedlichen Bereichen aufgeteilt. Gleich zu Beginn wird im Feld „Basic Styles“ die Grundinformationen zur Seite festgeschrieben: font: 80% Arial, Helvetica, sans-serif; background: #fff; margin: 0; padding: 0; Die Seite wird also vor einem weissen Hintergrund aufgebaut, als Schrift wird Arial, Helvetica oder – falls beide nicht installiert sind – eine beliebige serifenlose Schrift vorgeschlagen und die Innen- sowie die Aussenabstände aller Elemente werden – falls es nicht anders angegeben ist – auf eine Breite von 0 Pixel gesetzt.
Weitere Basiseigenschaften der Seite sind: img {border: none;} sowie ul, ol, li {list-style: none;}und a {color: #000;text-decoration: none;} Dies bedeutet, dass die einzelnen Bilder ohne Rahmen interpretiert werden, Listen prinzipiell ohne eigenen Stilelementen auskommen und Links in Schwarz und ohne einer zusätzlichen Dekoration (z. b. Unterstreichung) dargestellt werden.
Alle diese Eigenschaften werden aber lediglich als Grundinformationen an die Browser übermittelt und können aber in einzelnen Bereichen durchaus auch anders formatiert werden. Am Beispiel der Links wird das recht schnell klar: Obwohl die Grundinformation den Links eigentlich die Farbe Schwarz zuweist, gibt es bereits beim ersten Link der Seite eine Ausnahme: Links oben wird der Text „Tintenstrahldrucker.org Tintenstrahldrucker Shop und Preisvergleich“ in weiss dargestellt. Wer mit dem Cursor über diesen Text fährt, merkt recht schnell, dass es sich dabei um einen Link (zur Startseite) handelt. Die veränderte Farbdarstellung wird dadurch erreicht, dass in den div-containern #headerLogo und #headerLogoImage die Links – entgegen der Grundinformation – in weiss definiert sind. In der Datei screen.css heisst es nämlich: #headerLogo #headerLogoImage a {color: #fff; text-decoration: none; }
Auch in anderen Bereichen wird von diesem Prinzip Gebrauch gemacht und die Seite unter www.tintenstrahldrucker.org verfügt daher über ein ansprechendes Design, das sich in unterschiedlichen Abschnitten unterschiedlicher Gestaltungselemente und CSS-Definitionen bedient.