Die Abkürzung CSS steht für den englischsprachigen Begriff „Cascading Style Sheets“ und bedeutet übersetzt in etwa „mehrstufige Formatvorlagen“.
Es handelt sich bei CSS also um eine Formatierungssprache, die Gestaltungsanweisungen für nahezu beliebige Inhalte definiert und deshalb immer zusammen mit einer inhaltsgebenden Auszeichnungssprache wie HTML oder Sprachen aus der XML-Familie eingesetzt wird.
CSS identifiziert Inhalte anhand ihrer Eigenschaften, das sind beispielsweise allgemeine Elementnamen (z.B. a für Hyperlinks, img für Bilder) oder individuelle IDs. Außerdem ist es möglich, unterschiedliche Ausgabeformate zu berücksichtigen (z.B. diverse Bildschirmgrößen, Papierformate).
Warum überhaupt CSS nutzen?
In einem vorangegangenen Beitrag haben wir Ihnen gezeigt, wie Sie mit purem HTML Texte ansprechend formatieren können. Diese Methode eignet sich allerdings eher für einfache Websites und Newsletter, die per E-Mail verschickt werden sollen.
Außerdem stößt die Gestaltung von Websites allein mittels HTML schnell an ihre Grenzen. Gerade die Funktionalitäten responsiver Webauftritte lassen sich mit HTML nicht oder nur eingeschränkt realisieren.
Langfristig spart der Einsatz von CSS Zeit und vereinfacht die Erstellung komplexer Layouts. Auch wenn es für Anfänger erst einmal bedeutet, sich neben HTML und JavaScript mit einer weiteren Web-Technologie auseinandersetzen zu müssen.
Ade HTML-Tabellen…
Um beispielsweise mehrere Bilder horizontal nebeneinander anzuordnen oder mehrspaltigen Fließtext zu erzeugen, nutzte man in Vor-CSS-Zeiten hauptsächlich HTML-Tabellen (<table>…</table>).
Dies konnte schnell zu einem wahren Geduldsspiel ausarten, vor allem, wenn das Layout der so zu gestaltenden Website auch in unterschiedlichen Bildschirmauflösungen einigermaßen konsistent aussehen sollte. Smartphones und Tablets spielten zu dieser Zeit noch gar keine Rolle.
Hallo responsives Design!
Aber da wir gerade davon sprechen. Die Vielfalt an Endgeräten, welche Webinhalte zeigen können, ist in den letzten Jahren enorm gewachsen. Von Internet-fähigen Fernsehgeräten über Smartphones bis hin zu Kühlschränken mit eingebautem Webbrowser (die gibt’s übrigens wirklich).
Dadurch wurde es nötig, Layouts flexibel zu gestalten, um die Eigenschaften und Besonderheiten der jeweiligen Plattform effizient zu nutzen. CSS stellt hier die passenden Werkzeuge bereit.
Aber auch die Ansprüche der Nutzer haben sich geändert: Seien es kleinere Bildformate mit entsprechend kurzen Ladezeiten auf mobilen Endgeräten oder die für den Ausdruck optimierte Version einer Website ohne dunkle Seitenhintergründe.
Last but not least ist das World Wide Web heute ein unverzichtbarer Bestandteil des täglichen Lebens. Das schließt natürlich Menschen mit Behinderungen ein, Stichwort Barrierefreiheit. Auch das leistet CSS.
Trennung von Inhalt und Design
Eine der Prämissen modernen Webdesigns besteht in der strikten Trennung von Layout und Inhalt:
Der Inhalt wird meist durch die Auszeichnungssprache HTML bereitgestellt, während die Formatierungssprache CSS für die Gestaltung verantwortlich zeichnet.
Spätere Änderungen am Layout – und mögen sie noch so umfangreich sein – lassen sich an wenigen zentralen Punkten vornehmen. Das spart Zeit und sichert außerdem die gestalterische Konsistenz komplexer Websites. Darin liegt der größte Vorteil von CSS.
Konventionen für CSS
Das Layout einer Website definiert sich in CSS über sogenannte Regelsätze (englisch „rules“):
- Jeder Regelsatz besteht aus einem Selektor bzw. einer Gruppe von Selektoren
- sowie einer nachfolgend in geschweiften Klammern gesetzten Liste aus Name-Wert-Paaren, welche die gewünschten Eigenschaften beschreiben.
Für eine leichtere Lesbarkeit können beliebige Weißzeichen (z.B. Leerzeichen, Tabulatoren, Zeilenumbrüche) und Kommentare gesetzt werden.
Grundsätzlicher Aufbau:
.selektor1,selektor2 { name:wert; name:wert1,wert2; }
.selektor3 { name:wert; } /* Kommentar */Einige Beispiele:
h1 { color:#282828; } /* Typ-Selektor (gilt für alle Überschriften der ersten Ebene) */
.mainText { color:#282828; font-family:Arial,Helvetica,sans-serif; font-size:medium; text-align:justify }
#box77a { color:red; background-color:white; } /* ID-Selektor (gilt nur für das Element mit dieser ID) */
:link { color:blue; } /* Pseudoklasse (gilt für alle Elemente mit der Eigenschaft "link") */Gut zu wissen: Nicht im Stylesheet definierte Eigenschaften werden aus den Standardeinstellungen des Webbrowsers übernommen.
In HTML nutzt man die Universalattribute „class“ bzw. „id“, um Elementen die in Selektoren festgelegten Eigenschaften zuzuweisen; zum Beispiel:
<div class="mainText">Hier steht ein Text.</div>
<div id="#box77a" style="background-color:#e8e8e8;">Hier steht ein Text.</div>
Die erste „div“-Box übernimmt alle Eigenschaften des Selektors „mainText“, während die zweite „div“-Box die Eigenschaften ihrer im Stylesheet festgelegten ID „box77a“ nutzt.
Der Unterschied liegt darin, dass es im gesamten HTML-Dokument nur ein einzelnes Element mit der ID „box77a“ geben darf, während Klassen beliebig vielen Elementen zugeordnet werden dürfen.
Und noch eine Besonderheit haben wir eingebaut: Das zusätzliche „style“-Attribut in der zweiten „div“-Box überschreibt den im Stylesheet festgelegten Wert für die Hintergrundfarbe (direkt im HTML-Element angegebene Stile besitzen also immer eine höhere Priorität).
Hinweis: CSS bietet noch viele weitere Möglichkeiten, Selektoren zu benennen und miteinander zu verknüpfen. Das würde allerdings den Rahmen dieser Einführung sprengen.
