Geschäftsführer, Webdesigner & Web-Entwickler, staatlich geprüfter Mediengestalter
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.
Inhaltsverzeichnis
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.
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.
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.
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.
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.
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.
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.
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.
Die einzelnen Regeln enthalten folgende Bestandteile:
Der Aufbau der einzelnen Regeln ist immer gleich:
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.
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.
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.
Spannende Artikel und Infos zum Thema
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.
Das Content-Management-System WordPress basiert auf PHP, einer der gängigsten Programmiersprachen im Web. Ohne PHP funktioniert WordPress nicht. Umso wichtiger ist es somit, dass nicht...
mehr lesen
Die Sprache einer Website wird vielfach durch HTML-Tags übermittelt. Diese werden als HTML Sprachcodes bezeichnet und bestehen aus zwei Kleinbuchstaben. Festgelegt werden die HTML...
mehr lesen
Das WordPress Command Line Interface (kurz WP-CLI) bietet für alle, die mit dem Content Management System (CMS) WordPress arbeiten, einige Funktionen und kann dazu...
mehr lesen
Pagebuilder Plugin für WordPress funktionieren nach einem einfachen und zudem komfortablen Prinzip. Kinderleicht kann man damit eine Webseite aufbauen – oft sogar per Drag...
mehr lesen
Was sind Primärfarben? Bei Primärfarben handelt es sich gemäß der Farbenlehre um die Grundfarben, aus denen sich alle anderen Farben…
Was versteht man unter Kerning? Kerning ist ein Begriff aus dem Bereich der Typografie, der sich mit der Anpassung des…
Was ist das DNS? DNS ist die Abkürzung für den Begriff Domain Name System. Das DNS kann als das Telefonbuch…
