Was ist CSS3?

Web-Entwicklung
Was ist CSS3?

Wer sich mit Webentwicklung und Webdesign beschäftigt, kommt um HTML und CSS nicht herum. Während HTML für die Inhalte und Struktur einer Website zuständig ist, verleiht CSS einem Webdokument die Gestalt und sorgt im Idealfall für ein zeitgemäßes Layout.

Was ist CSS3?

Bei CSS3 handelt es sich um eine reine Stylesheet-Sprache, es ist also keine echte Programmiersprache. Dabei steht das Akronym “CSS” für “Cascading Style Sheets”, was so viel bedeutet wie “Stufenweises Stylesheet”.

Mit CSS3 wird das Aussehen der einzelnen Elemente in einem Webdokument festgelegt, so wie es im Browser erscheinen soll. Webseiteninhalte werden so ansprechend und User-freundlich gestaltet.

Ein Beispiel dafür sind Links. Im CSS wird mit einer Regel allen Links eine besondere Farbe zugewiesen und etwa bestimmt, dass Links beim Darüberfahren mit dem Mauszeiger (das sogenannte “Hovern”) einen Unterstrich erhalten und dadurch eindeutig als klickbar kenntlich gemacht werden.

CSS definiert also für ein Webdokument die äußerliche Gestalt, das heißt Farben, Layouts und Typografie, Abstände sowie andere dekorative Funktionen. Es sorgt durch das kaskadierende Prinzip für ein einheitliches Design, unabhängig vom Browser oder Betriebssystem.

Entstehung und Entwicklung von CSS3

Man kann es sich heute kaum noch vorstellen, aber in den ersten Jahren des World Wide Web ab 1989 gab es so etwas CSS noch gar nicht. Das heißt, Webdokumente konnten nicht gelayoutet werden.

In den frühen 90er Jahren gab es die ersten Versuche, Styling in Webdokumente einzubinden, aber erst Håkon Wium Lies Konzept der Cascading Style Sheets von 1994 versprach, ein Erfolg zu werden.

CSS zeichnete sich gegenüber den Vorversuchen vor allem durch seine Einfachheit aus. Das Besondere war, dass man erstmals Stile für spezielle Elemente derselben Kategorie für das ganze HTML-Dokument übergreifend definieren konnte.

Diese Stile konnten außerdem miteinander kombiniert und untereinander priorisiert werden. Ein weiteres Novum: der User bekam mit CSS die Möglichkeit, das Aussehen eines Webdokuments im eigenen Browser anzupassen.

1996 wurde die erst offizielle Version von CSS vorgestellt, und schon 2 Jahre später erschien CSS2. Es gab viele Diskrepanzen und Unzufriedenheit unter den beteiligten Entwicklern, sodass sich CSS2 nicht wirklich durchsetzen konnte. Zwischenzeitlich drohte sogar das gesamte Projekt CSS zu scheitern.

Gekommen um zu bleiben: CSS3

Das W3C, also das “World Wide Web Consortium”, arbeitet aber nun schon seit 2002 an der Entwicklung des Folgestandards CSS3. CSS3 wird modular weiterentwickelt, um Teilentwicklungen unabhängig voneinander bearbeiten und veröffentlichen zu können.

Deshalb kann man bei CSS3 nicht von einer abgeschlossenen Spezifikation sprechen, eher von dauerhaftem „work in progress“.

Dennoch werden alle neu erscheinenden Module und Updates, wie das revolutionäre CSS Grid Layout, unter dem Oberbegriff CSS3 erscheinen. Ein CSS4 oder CSS5 wird es nicht geben.

Browser Support

Die fließende Veröffentlichung der CSS Module bedingt, dass Updates von verschiedenen Browsern unterschiedlich schnell umgesetzt werden. Daher kann es passieren, dass ein und dieselbe Website bei einem Chrome-Nutzer anders dargestellt wird, als bei einem Firefox-User.

Für den Fall, dass ein Browser bestimmte Anweisungen im Stylesheet nicht umsetzen kann, ermöglicht CSS, sogenannte “Fallback”-Regeln einzusetzen. Damit kann der Browser diejenigen Werte, die er nicht versteht, ignorieren und auf Hilfsanweisungen zurückgreifen.

Erste Schritte mit CSS

CSS braucht HTML, um zu funktionieren. Dabei gibt es verschiedene Möglichkeiten, CSS in HTML einzubinden.

Nehmen wir, wie schon im Artikel über HTML5, ein einfaches Beispiel eines HTML-Dokuments:

Das HTML-Dokument sorgt für Inhalt und Struktur, die visuelle Darstellung wird mit CSS festgelegt. Es gibt nun drei, eigentlich sogar vier Möglichkeiten, Stylesheet und HTML zu verknüpfen.

Inline Style

Hierbei werden jedem Element direkt die entsprechenden Eigenschaften zugewiesen.
Dazu wird das entsprechende Element im HTML mit CSS-Attributen ergänzt.

wird ergänzt zu

Die h1-Überschrift würde nun fett und rot dargestellt.

Bei Inline Styles gilt es zu beachten, dass die Style-Zuweisung nur an Ort und Stelle gilt, sich also lediglich auf genau das eine h1-Element bezieht, für das es definiert wurde. Es gilt jedoch für kein anderes h1-Element des Dokuments.

Das Stylesheet in der HTML-Datei einbinden

Es ist möglich, das CSS mittels eines style-Elements im head der Datei einzupflegen:

Diese Vorgehensweise ermöglicht es immerhin, Formatierungen auf jedes Element derselben Kategorie anzuwenden. Weil die HTML-Datei schnell unübersichtlich werden kann, eignet sich diese Methode jedoch nur für kleine Projekte.

Externes Stylesheet

Aufgrund der Lesbarkeit und einfacheren Handhabung wird es als best practice angesehen, CSS, HTML und ggf. auch JavaScript in separaten Dateien auszulagern.

Dazu listet man die Formatierungen in einem Stylesheet, einer Datei mit der Endung .css, auf.

Damit der Browser auf die Formatierungen zugreifen kann, muss das Stylesheet anschließend mittels link – Tag in die HTML-Datei importiert werden.

Aufbau einer CSS-Datei

Die einzelnen Regeln enthalten folgende Bestandteile:

  • Der Selektor bezeichnet das HTML-Element, das es zu formatieren gilt. Es gibt viele verschiedene Selektoren, die sich in ihrer Spezifität unterscheiden. Diese ist wichtig zu kennen, denn sie bestimmt den Rang einer Regel im Stylesheet. Wenn mehrere Regeln auf ein Element zutreffen, bestimmt der Rang, welche Regel der Browser umsetzt.
  • Die Deklaration, bestehend aus Eigenschaft und zugewiesenem Wert.

Der Aufbau der einzelnen Regeln ist immer gleich:

  • Am Zeilenbeginn steht der Selektor.
  • Darauf folgen geschwungene Klammern, innerhalb derer sich – eingerückt – eine oder mehrere sogenannte Deklarationen befinden.
  • Deklarationen werden üblicherweise untereinander geschrieben.
  • In der Deklaration steht zunächst die Eigenschaft, darauf folgen ein Doppelpunkt und der Wert.
  • Jede Deklaration schließt mit einem Semikolon.

In unserem Beispiel sieht das so aus:

Die Regeln im Stylesheet sollten nicht beliebiger Reihenfolge aufgelistet werden. Es gibt es einige essenzielle Grundsätze, die es auf jeden Fall zu beachten gilt, sonst kann es einige unliebsame Überraschungen im Layout geben.

  1.  Inline-CSS geht vor externes CSS und vor CSS innerhalb des style-tags.
  2. Gibt es in einem Stylesheet zwei Regeln gleicher Spezifität für dieselbe Eigenschaft, gilt die zuunterst stehende. Legt man demnach oben im Stylesheet die Farbe blau für Text in <p>-Elementen fest, und unten rot, erscheinen alle Inhalte innerhalb jedes im <p>-Elemente Browser rot.
  3. Eine CSS-Regel mit !important hat immer Vorrang.
  4. Höhere Spezifität eines Selektors geht vor.

CSS in WordPress nutzen

Auch für WordPress-Seiten kann es sehr nützlich sein, CSS3 zu beherrschen. Die Grundprinzipien von CSS zu kennen, ist immer dann hilfreich, wenn man auf die Schnelle eine bestimmte Eigenschaft ändern möchte, oder wenn das Theme eine gewünschte Änderung im Layout nicht vorsieht.

In diesen Fällen ist es der einfachste Weg, über den Reiter “Zusätzliches CSS” im Customizer eigene Regeln zu definieren.

Es ist auch möglich, Custom CSS über den Theme-Editor in WordPress einzufügen. Doch besteht hier vor allem für Laien die Gefahr, Fehler zu begehen, oder bei einem Theme-Update das CSS wieder zu verlieren.

In jedem Fall sollte man darauf achten, vor einem Theme-Wechsel oder Theme-Update ein Backup zu erstellen, damit das CSS nicht verloren geht.

Fazit zu CSS3

CSS3 ist elementar für die Webentwicklung. Da jede visuelle Gestaltung über CSS gesteuert wird, lohnt es sich für jeden Webseiteninhaber, wenigstens mit den Basics von HTML5 und CSS3 vertraut zu sein. So behält man die Kontrolle darüber, wie die eigene Website dargestellt wird und kann immerhin kleinere Änderungen im CSS selbst übernehmen.

Auch WordPress-User, die sich ganz auf den Customizer verlassen, verstehen dessen Funktionsweise besser und können selbstsicher das Layout bearbeiten.



Sie benötigen eine WordPress Agentur? Wir stehen als Ihre Experten zur Verfügung. Treten Sie mit uns in Kontakt und vereinbaren Sie ein unverbindliches Beratungsgespräch.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.