CSS Design – Cascading Style Sheets

Tipps & Tricks für Einsteiger und Profis

Dieser Blog widmet sich dem Thema CSS-Design. Hier könnt ihr wertvolle Informationen sowie Tipps und Tricks über CSS Design (Cascading Style Sheets) erfahren und in euren eigenen Projekten anwenden. Es geht um interessante Themen wie zum Beispiel Layout & Stile, Typographie & Schrift, Web-Tools & More, HTML Goodies, Browserweichen and more.

Da ich als Webdesigner ständig mit Themen wie CSS und HTML konfontiert werde und mittlerweile schon viele interessante und nützliche Erfahrungen gesammelt habe, werde ich euch diese nun zur Verfügung stellen. Es werden sich in Zukunft immer weiteren tolle Themen in meinem CSS-Blog finden.

Interessiert euch also das Thema CSS und Webseitengestaltung auf hohen Standard, so habt ihr die Möglichkeit euch hier anzumelden und wertvolle Kommentare und Tipps zu den jeweiligen Themen loszuwerden. Ich wünsche euch viel Glück und Erfolg bei euerer Arbeit.

CSS – Aufgabe & Funktion

Grundlegende Informationen über CSS-Design

Das Erstellen von Webseiten ist heute sehr viel einfacher als früher geworden. Das liegt zum einen daran, dass verstärkt Content-Management-Systeme eingesetzt werden. Es liegt aber auch daran, dass mit CSS eine Möglichkeit geschaffen wurde, das Design der Website über eine Datei oder einen einfachen Satz von Design-Regeln zu steuern. Cascading Style Sheets ist die ausführliche Beschreibung für CSS und versteht sich als deklarative Stylesheet-Regelung für strukturierte Dokumente, umfasst also Regeln die weitergehend wirksam sind als für reines Webdesign. Meist wird CSS über eine zentrale Datei festgelegt. Man kann aber auch einzelne Regeln in einzelnen Webseiten modifizieren. So kommt dann die “Cascade” zustande.

Die Regeln sind beim W3C-Konsortium festgelegt und können über dessen Website (www.w3.org/Style/CSS/) abgerufen werden. Mit CSS ist es möglich geworden, für unterschiedliche Ausgabemedien (wie Monitor oder Drucker, Projektion oder Sprachausgabe) eine jeweils spezifische Darstellung anzugeben. So kann man z. B. Hyperlinks für den Drucker extra formatieren oder für Geräte mit niedriger Auflösung die Schriftart oder Schriftgröße optimieren.
Neben vielen unterschiedlichen Festlegungen für Farben und Schriften hat man mit CSS die Möglichkeit, beliebige Elemente auf der Webseite frei zu positionieren und Hintergrundbilder in Abhängigkeit von bestimmten Bedingungen festzulegen. Damit wird CSS unumgänglich für Layouter von Websites und deren Tätigkeit hin zum CSS-Design professionalisiert.

Für Webseiten kann man verschiedene Stufen des CSS-Designs anstreben. Während CSS 1 schon lange aus dem Rennen ist, dominiert zurzeit CSS 2.1. CSS 3 ist noch in der Entwicklung und wird erst in ein paar Jahren bestimmend werden. CSS3 wird anders als die Vorgänger-Versionen modular strukturiert sein, d. h. unterschiedliche Teiltechniken haben eigene Entwicklungsrhythmen und Versionsstufen.

Vorteile von CSS-Design

Vorteile einer auf CSS basierten Webseite

Cascading Style Sheets (CSS) ist eine Stylesheet-Sprache, mit der die grafische Darstellung von Dokumenten und Inhalten formatiert wird. Ein Webdesigner definiert mit CSS-Befehlen die visuelle Form der Vorlagen für verschiedene Medien. CSS werden kombiniert mit XML oder HTML-Dokumenten, die den Inhalt einer Website vorgeben, während CSS das Aussehen dieser Inhalte abschnittweise bestimmt. Dabei können die CSS innerhalb eines HTML-Tags, in einer HTML-Datei oder als externes Linkelement eingesezt werden. Da die Vorgaben der CSS von einem Abschnitt zum nächsten stufen- oder kaskadenweise weitergegeben werden, wurden die CSS nach diesem Vorgang benannt. Dem CSS Designer ist es möglich, für beliebige Abschnitte oder für das ganze Dokument Formatierungsmerkmale zu schreiben. Browser lesen die CSS-Befehle und stellen anhand deren Vorgaben die fertige Webseite im Internet dar.

Das CSS Design umfasst alle Bereiche der grafischen Darstellung von Webseiten in allen Medien. Mit CSS können die Schrifttypen eines Dokuments genau so vorgegeben werden, wie die Farben von Schrift und Hintergrund. Zugleich wird beim CSS Design festgelegt, welche genaue Position die ausgewählten einzelnen Elemente auf der Seite haben sollen, die die angesprochenen Medien visualisieren. Besondere Bedeutung hat das CSS auch für das Mobile Computing. CSS erlaubt es, medienspezifische Darstellungsdefinitionen zu geben. Damit wird es beispielsweise möglich, dass die Auflösung von Webinhalten je nach Medium, von dem sie abgerufen werden, anders definiert wird. Der Browser stellt Webseiten auf großen Computerbildschirmen in höherer, auf dem kleinen Handydisplay in niedriger Auflösung dar. Entsprechend können mit CSS auch Ausgabe- oder Darstellungsweise eines Dokuments für Drucker, Beamer oder andere Medien bestimmt werden.

CSS Design – Geschichte & Entwicklung

CSS-Design früher und heute

Das Programmieren von Websites war früher eine schwierige Sache, wenn man erreichen wollte, dass komplexer aufgebaute Webseiten mit unterschiedlich formatierten Text und vielen Grafiken ein möglichst schönes und berechenbares Layout hatten. Berechenbarkeit von Layout war nämlich keine zentrale Zielsetzung bei der Entwicklung von HTML, der Sprache, die nach wie vor bestimmend für den Aufbau von Internet-Seiten ist. Man behalf sich mit Tabellen und sogenannten blinden GIF-Dateien, doch dies führte nicht nur zu unübersichtlichen Code, sondern auch zu erheblichen Barrieren bei der Nutzung der Website. Doch bereits vor vielen Jahren wurde eine bessere Strukturierungsmöglichkeit entwickelt, um ein optimales Design der Webseiten sicherzustellen: CSS.

Cascading Style Sheets (CSS) ist eine Design-Sprache zur Beschreibung der Präsentation eines Dokuments in einer Markup-Sprache. Die häufigste Anwendung für CSS-Design ist HTML und XHTML, also die Sprachen, die für Internet-Seiten bestimmend sind.

CSS verwendet eine zentrale Stelle auf einer Website, um zu definieren, wie Farben, Schriften, Layout und andere Aspekte der Dokument-Präsentation auf der Website sein sollen. CSS ist in erster Linie dafür entwickelt worden, um die Trennung von Dokument-Inhalt und Dokument-Präsentation sicherzustellen. Diese Trennung dient der Content Accessibility, der Flexibilität und Kontrolle in der Spezifikation der Darstellung und führt auch zur Verringerung der Komplexität und der Wiederholung des strukturellen Inhalts. Tabellenfreies Layout ohne blinde GIFs werden nun möglich. Barrierefreiheit wird nun besser machbar. Mittels CSS können auch die gleichen Markup-Seiten verwendet werden, um verschiedene Stile für verschiedene Rendering-Methoden wirksam zu machen. Z. B. kann die gleiche Seite auf dem Bildschirm oder auf dem Drucker unterschiedlich ausgegeben werden.