Die Abkürzung CSS steht für den englischen Begriff „Cascading Style Sheets„. Übersetzt definieren Cascading Style Sheets sogenannte kaskadierende (stufenförmig bzw. hintereinander angelegte) Stilvorlagen im Bereich des Webdesign. CSS ist eine durch das W3 Consortium deklarierte Sprache und ergänzt sich zum herkömmlichen HTML. Als Stylesheet-Sprache stellt sie heute den Standard bei der Darstellung von Websites dar.
Zweck und Nutzen von CSS
Der Grundgedanke, der hinter der Entwicklung von CSS stand und auch noch heute steht, ist der, die inhaltliche Struktur einer Webseite von der grafischen abzutrennen und so weitestgehend unabhängig voneinander zu gestalten. Folglich sollte HTML künftig nur noch eine rein Content-bezogene und funktionale Sprache sein, während Optik und Layout via CSS realisiert und definiert werden sollten. Da beide Sprachen unabhängig voneinander auf das spätere Produkt wirken, und das CSS sogar in einer separaten Datei abgelegt, gepflegt und aufgerufen werden kann, ergeben sich zahlreiche Vorteile für den Webdesigner oder Webmaster.
Der vermutlich größte Nutzen ist dabei der, dass ein Stylesheet-Dokument in seiner zentralen Eigenschaft auf alle mit ihm verbundenen Seiten und Unterseiten wirkt, also auch jede (nachträgliche) Veränderung an ihr sich unmittelbar auf alle diese angebundenen Seiten auswirkt. Das ist in besonderem Maße für sehr umfangreiche Webprojekte sinnvoll, die aus zahlreichen Seiten und Unterseiten bestehen und/oder sich regelmässig um solche erweitern.
In der Praxis bedeutet dies eine enorme Zeitersparnis im Bereich der Pflege und Anpassung an bspw. Bedürfnisse des Besuchers oder Betreibers, an Veränderungen im Bereich der Usability, Barrierefreiheit oder neue Darstellungsmethoden und -techniken in Form moderner Ausgabegeräte.
Die Trennung von HTML und CSS im Detail
HTML, XML sowie die dynamische Skriptsprache PHP stellen die inhaltliche Struktur eines Dokuments dar. Der Content wird dabei wie bisher auch direkt in die HTML-Datei geschrieben oder inkludiert/aus externen Quellen eingelesen. Aktionen (Actions), wie beispielsweise interne und externe Links, das Senden und Empfangen von nutzerdefinierten Inhalten wie Formularfelder, die Zuordnung von Ländercodes und alle weiteren für die Funktionalität einer Webseite relevanten Codes werden auch weiterhin via HTML und Co. direkt im Dokument deklariert und ausgeführt.
CSS definiert indes die Erscheinungsform dieser strukturellen und funktionalen Elemente, also die Art und Weise, wie der Besucher sie optisch wahrnimmt. Das geschieht beispielsweise über Farben, Formen und Schriftarten sowie -größen. Sie können direkt in das HTML-Dokument geschrieben und dort auch definiert werden, das externe Stylesheet hat sich allerdings bewährt und wird vorzugsweise verwendet. Angaben zu den optischen und darzustellenden Parametern werden in dieser *.css-Datei hinterlegt und durch einen Befehl im Kopf des HTML-Dokuments eingepflegt.
Unterschiedliche CSS-Dateien für unterschiedliche Darstellungen (bspw. getrennt in Fonts, Layouts und/oder auch geräteabhängige oder browserabhängige unterschiedliche Parameter) machen die Dokumentenpflege noch einfacher. Hierfür werden innerhalb des Stylesheet Klassen und Ids benannt, entweder frei oder anhand ihrer HTML-Tags, und mit den verschiedensten Parametern versehen und in sich als Codeblock geschlossen. Der Aufruf des Klasse oder ID geschieht dann unmittelbar im HTML- oder PHP Dokument über den Befehl „id=“ bzw. „class=“ sowie dem vergebenen Namen für den Block.
So funktioniert CSS
Innerhalb eines ID- oder Klassenblocks, geöffnet und geschlossen mit geschwungenen Klammern „{}“, werden sämtliche Angaben zur Gestaltung vorgenommen. Dazu zählen Schriftart und -größe sowie Farbe, Umrandungen und deren Breite/Farbe, Hintergrundfarben- oder Bilder sowie deren Eigenschaften, aber primär auch Positionsangaben sowie Größenverhältnisse ganz allgemein.
Gibt man einer ID oder Klasse Werte zur Höhe und Breite (height, weight) sowie Positionsangaben (top, left, center, bottom, meist in Verbindung mit Koordinaten in Pixel oder pt), positioniert und deklariert man ein Objekt bereits durch das Stylesheet. Sie können sie sich auch automatisch an Medientypen wie Bildschirme und deren Eigenschaften anpassen (sog. Media Queries). Fügt man im HTML-Dokument der ID oder Klasse nun bspw. ein Bild zu, oder umgekehrt, gibt einem Bild eine Klasse/ID, dann richtet es sich nach diesen definierten Werten. Eine Veränderung dieser Werte im Stylesheet (bspw. das Neupositionieren von top auf bottom) wirkt sich somit unmittelbar aus, das Bild erscheint nun auf allen Seiten, die dieses Bild in Verbindung mit der Klasse/ID beinhalten, unten statt oben.
Das Gleiche funktioniert auch mit beispielsweise Texten. Hier kann die ID/Klasse sowohl auf Absätze bezogen sein (der p-Tag) oder aber frei definiert, dann verhält es sich wie ein Textfeld (vergleichbar mit Textfeldern in Officeanwendungen, die frei positioniert und skaliert werden können). Positionierung und Skalierung werden wiederum über den jeweiligen Block im Stylesheet angegeben und können eingeschränkt auch dynamisch sein, wie z.B. durch Angaben zu min-height (Mindesthöhe) oder max-width (Maximalbreite).
CSS löst die Tabelle ab
Ein weiterer entscheidender Vorteil von CSS ist der, dass seitdem komplett auf Tabellen für das Webseitenlayout verzichtet werden kann. Die Angaben zu Höhe und Breite eines Blocks definieren rechteckige bzw. quadratische Felder, denen Inhalte zugewiesen werden können und die sich, sofern korrekt definiert, auch auf diese Felder beschränken. Zudem können diese Felder (Container genannt) überlappend dargestellt werden. Vererbungsattribute innerhalb von CSS erzielen, dass wiederkehrende Werte nicht ständig neu definiert werden müssen, sondern sich aus sogenannten Elternelementen automatisch ableiten und übernommen werden.
Außerdem können eine Vielzahl von Werten zur Positionierung unmittelbar abhängig vom vorherigen oder Elternelement definiert werden. So lassen sich auch inhaltsabhängige Lösungen erzielen, die das Erscheinungs- und Darstellungsbild maßgeblich mit beeinflussen können – die starre Tabelle fällt weg und wird durch eine flexiblere Alternative durch die Container ersetzt.
Innerhalb eines Containers (DIV) ist es wiederum möglich, ebenfalls HTML, PHP oder auch ganze Skripte auszuführen, die sich dann ebenfalls nach den CSS-Parametern richten, sofern vorgesehen. Die Verschachtlung erfolgt dabei innerhalb des HTML-Dokuments logisch und chronisch. So kann einem DIV-Container eine Klasse zugewiesen, innerhalb des Containers ein Link geschrieben und einer Klasse zugeordnet und der Link wiederum um ein Bild ergänzt und ebenfalls via CSS mit Parametern versehen werden.
Ebenfalls ist es möglich, Angaben zum „Title„, alternative Bildunterschriften bei fehlerhafter Darstellung etc. zu deklarieren. Diese können sich untereinander ergänzen, aufeinander aufbauen, gegenseitig aufheben oder auch nach Priorität geordnet werden.
Browserweichen, CSS-Hacks und Spielereien
Dank des im Jahre 2000 eingeführten neuen und bis heute aktuellen CSS3 sind Darstellungsformen möglich, die früher nur über Skripte (bspw. Javascript) möglich waren. So sind einfache Animationen bei einem Mouse-Over durch entsprechend komplexe CSS-Definitionen realisierbar, Schatteneffekte, abgerundete Ecken der ansonsten quadratischen/rechteckigen Container und einige andere. Die Ladezeit verkürzt sich so enorm und die Darstellung bleibt stets gleich.
Allerdings gibt es eine Ausnahme: Geräte- und browserabhängige Interpretationsschwierigkeiten. So interpretiert bspw. nicht jeder Browser jeden Befehl identisch – das bekannteste Beispiel hierfür sind Unterschiede in der Darstellung zwischen Mozilla Firefox und dem Internet Explorer. Hierfür werden – um einheitliche Darstellungen zu realisieren – sogenannte Hacks verwendet. Sie sind keine anerkannten deklarierten Selektoren/Werte/Parameter, sondern nutzen die Schwäche des Browsers aus, die meist dahingehend funktioniert, ein Element anzuzeigen oder nicht.
Da CSS es ermöglicht, ein Layout dynamischer als mit HTML anzulegen, sind auch Unterschiede im Ausgabegerät und dessen Auflösung leichter zu realisieren – das Layout passt sich entweder selbst an, oder kann durch einen Code (Weiche) entsprechend dem Browser und/oder Ausgabemedium auf ein alternatives, angepasstes Stylesheet-Dokument verwiesen werden. Mittels CSS ist auch Barrierefreiheit einfacher umzusetzen. Durch das Attribut „media“ können Ausgabegeräte für Blindenschrift oder auch Screenreader definiert und zugeordnet werden.
Zusammenfassung
CSS, kurz für Cascading Style Sheets, ist eine Sprache für die Webgestaltung und standardisiert die Darstellung von Websites. Sie ermöglicht es, Design und Inhalt durch Trennung von HTML und CSS unabhängig voneinander zu verwalten. Diese Modularität erleichtert vor allem die Pflege und Anpassung von großen und komplexen Webprojekten.
CSS und HTML agieren komplementär: Während HTML für die strukturellen und funktionalen Aspekte einer Webseite zuständig ist, kümmert sich CSS um das Layout und die Optik, beispielsweise Farben, Schriftarten und Formen. Externe Stylesheets bieten dabei eine effiziente Möglichkeit, Designvorgaben zentral zu speichern und abzurufen.
Die Flexibilität von CSS erlaubt eine Vielzahl von Darstellungsoptionen und -techniken. Mit CSS3 sind sogar einfache Animationen und Effekte möglich, die zuvor Skriptsprachen wie JavaScript erforderten. Dennoch müssen Webdesigner auf browser- und gerätespezifische Unterschiede achten und gegebenenfalls Anpassungen vornehmen, um eine konsistente Darstellung zu gewährleisten.
Die Verwendung von CSS führt zu einer dynamischen und anpassbaren Webgestaltung, die auch Aspekte der Barrierefreiheit einfacher umsetzbar macht. Dadurch wird die Abhängigkeit von starren Tabellenlayouts obsolet und eine flexiblere Webdesign-Lösung geboten.
Häufige Fragen und Antworten
Was bedeutet die Abkürzung CSS?
Die Abkürzung CSS steht für „Cascading Style Sheets“ und definiert kaskadierende Stilvorlagen im Bereich des Webdesigns. CSS ist eine Sprache des W3 Consortiums und ergänzt HTML bei der Darstellung von Websites.
Was ist der Zweck und Nutzen von CSS?
Der Zweck von CSS besteht darin, die inhaltliche Struktur einer Webseite von der grafischen Darstellung zu trennen. So können Änderungen am Layout und Design unabhängig von der Content-Ebene vorgenommen werden. Der Nutzen liegt in der einfacheren Pflege und Anpassung von Webprojekten, insbesondere bei umfangreichen Websites mit vielen Seiten und Unterseiten.
Wie funktioniert die Trennung von HTML und CSS?
HTML definiert die inhaltliche Struktur einer Webseite, während CSS die Darstellungseigenschaften festlegt. Die Trennung erfolgt, indem CSS-Stylesheets im HTML-Dokument eingebunden werden. Stylesheets enthalten die Design-Parameter wie Farben, Schriftarten und Layout-Anweisungen, die dann auf die HTML-Elemente angewendet werden.
Warum löst CSS Tabellen ab?
Durch die Verwendung von CSS können die Layout-Attribute, die zuvor in Tabellen verwendet wurden, durch CSS-Stylesheets definiert werden. CSS ermöglicht eine flexiblere und dynamischere Gestaltung von Websites, die sich besser an verschiedene Bildschirmgrößen und Geräte anpasst. Dadurch wird der Einsatz von Tabellen zur Layout-Strukturierung überflüssig.
Welche Möglichkeiten bieten CSS für die Webgestaltung?
CSS bietet eine Vielzahl von Gestaltungsmöglichkeiten, darunter die Definition von Farben, Schriftarten, Layouts, Hintergründen, Abständen und Größenverhältnissen. Mit CSS3 sind sogar Animationen, Effekte und Schatteneffekte möglich. Durch die flexible Anpassung an verschiedene Ausgabegeräte und die Unterstützung von Barrierefreiheit ermöglicht CSS eine dynamische und anpassbare Webgestaltung.