CSS ist zwar keine Programmiersprache, sondern nur eine Auszeichnungs- oder Formatsprache für HTML und SVG. Trotzdem gibt es eine eigene Syntax - also ein festes Regelwerk, wie was notiert werden soll!

In CSS sind Eigenschaften innerhalb von Regelsätzen (auch Regeln) organisiert. Ein Regelsatz besteht aus:

• Selektor
• geschweiften Klammer {}
• eine oder mehreren Deklarationen, in denen Eigenschaften ein Wert zugewiesen wird

Eine Deklaration benötigt zwischen Eigenschaft und Wert einen Doppelpunkt. Zwischen zwei Deklarationen steht ein Semikolon.

Die Werte, die man zuweisen kann, sind sehr unterschiedlicher Art. Es gibt Eigenschaften, die einen einzelnen Wert erhalten können, und Sammeleigenschaften (shorthand), denen man eine Liste von Werten gibt, die dann auf bestimmte andere Eigenschaften verteilt werden. Werte können Zahlen sein, Längenangaben, Zeichenketten oder unterschiedlichste Schlüsselbegriffe. Das wird bei den Beschreibungen der Eigenschaften im Detail erklärt.

Beachte: Genau genommen benötigt die letzte Deklaration eines Regelsatzes kein Semikolon. Sie sollten es aber trotzdem setzen. Wenn Sie den Regelsatz später erweitern und das Semikolon vergessen, entsteht ein Syntaxfehler, der beide Deklarationen unwirksam macht.

Beispiel:

h1 {
  color: red;
}
h1, h2 {
  background-color: #eee;
  border-radius: .5em;
}

Der erste Regelsatz besteht aus einem Selektor h1, dem als Deklaration die Eigenschaft color mit dem (Farb)-Wert rot zugewiesen wird.

Farben können entweder mit Farbnamen (z.B. red) oder mit Zahlenwerten (RGB-Modell) angegeben werden (z.B.: #33a3aa).

Der zweite Regelsatz besteht aus einer Selektor-Liste mit zwei voneinander unabhängigen Selektoren h1 und h2, über die den Überschriften mit background-color eine Hintergrundfarbe und mit border-radius abgerundete Ecken zugewiesen werden.

Selektoren können HTML-Elemente, aber auch ganz spezielle Kombinationen sein.

Werden einer Eigenschaft mehrere Werte zugewiesen, handelt es sich üblicherweise um eine so genannte „shorthand“-Eigenschaft. Dabei handelt es sich um Eigenschaften, die mehrere andere Eigenschaften zusammenfassen. Die Werte für die Einzeleigenschaften werden dabei durch Leerzeichen voneinander getrennt.

h1 {
  color: red;
  font: 300% cursive;
}
 
h1, h2 {
  background-color: #eee;
  border-radius: .5em;
  border: thin solid red;
}

Die Deklaration für die zusammenfassende Eigenschaft font hat einen Wert für die Schriftgröße (font-size) und durch ein Leerzeichen getrennt einen für den Schrift-Stil (die Einzeleigenschaft font-style).

Der zweite Regelsatz enthält eine Deklaration für die zusammenfassende Eigenschaft border, die den Selektoren eine Randlinie zuweist. Hier werden mehrere Werte für Breite (border-width), Stil (border-style) und Farbe (border-color) durch Leerzeichen voneinander getrennt.

Der Browser arbeitet die verschiedenen Deklarationen des Stylesheets nacheinander ab. Wenn eine Eigenschaft mehrfach definiert wird, so gilt nur der zuletzt akzeptierte gültige Wert. Werden in einer Regel Eigenschaften aufgeführt, die das verarbeitende Programm nicht kennt, so wird diese Eigenschaft ignoriert. Das gilt auch für unbekannte oder ungültige Werte.

h1 {
  color: red;
  color: verygreen;
  color: gren;
}

In diesem Beispiel wird für ein Element die Schriftfarbe rot definiert. Die nachfolgenden Wertzuweisungen werden ignoriert, denn der Farbname „verygreen“ ist keine in CSS gültige Farbangabe und auch der Wert „gren“ (statt „green“) wird nicht akzeptiert.

Um die Übersicht zu behalten oder bestimmte Regelsätze zu erläutern, ist es möglich, innerhalb von Stylesheets Kommentare zu verfassen, die vom Browser bei der Anzeige des Dokuments ignoriert werden. Ein Kommentar beginnt mit den Zeichen. Das bedeutet, dass Kommentare nicht ineinander verschachtelt werden können.

/* Überschrift */
h1
{
  font-size: 18pt;
}

HTML ist schon zu einem großen Teil barrierearm. Block-Elemente nehmen den verfügbaren Raum ein und brechen bei schmalen Viewports in die nächste Zeile um. In den Browser-Stylesheets gibt es schwarze Schrift auf weißem Grund. Man sollte darauf achten, keine zusätzlichen Barrieren durch benutzerunfreundliche CSS-Festlegungen zu errichten.

CSS ermöglicht eine individuelle Gestaltung Ihrer Webseite. Achten Sie dabei aber darauf, dass

• sie für alle Besucher benutzbar bleibt.
• Ihre Stylesheets übersichtlich organisiert sind und helfen, Fehler zu vermeiden, bzw. später einfach zu warten

Beachte: Trennung von Inhalt (HTML), Präsentation (CSS) und Verhalten (Javascript)! Auch wenn es oft einfacher scheint, einem Element ein style-Attribut zu geben, wird HTML-Markup so auf Dauer unübersichtlich und schwierig zu warten.

Die grundsätzliche Formatierung ist bei CSS weitgehend frei, man kann also zwischen den einzelnen Bestandteilen Selektor, geschweiften Klammern, Eigenschaften, Doppelpunkt, Werten und Semikola beliebig Leerzeichen, Tabulatorzeichen und Zeilenumbrüche einfügen, z. B. um das Stylesheet übersichtlicher zu gestalten. So sind die zwei folgenden – inhaltlich identischen – Definitionen beide erlaubt:

/* einzeilig */
h1{font-size:2.5em;margin-left: 2em;text-align:center;border-bottom:medium solid red; margin-right:2em;}

versus

/* mehrzeilig*/
h1 {
  font-size: 2.5em;
  border-bottom: medium solid red;
  text-align: center;
  margin: 0 2em;
}

Der mehrzeilige Regelsatz wirkt viel übersichtlicher:

• Der Selektor ist gleich erkennbar
• Deklarationen sind eingerückt
• Eigenschaft und Wertzuweisung sind durch ein zusätzliches Leerzeichen getrennt.
• die beiden Deklarationen margin-left und margin-right wurden zu margin zusammengefasst.

Er erscheint zwar länger, moderne Code-Editoren können solche Regelsätze mittels Code-Folding jedoch ein- und ausklappen.

a.backlink:hover, 
a.backlink:focus {
  color: purple;
  background: #fffbf0 url("data:image/svg+xml,...") no-repeat right;
}

Hier werden im zweiten Regelsatz mehrere Selektoren in einer durch Komma separierten Selektor-Liste angesprochen. Der Regelsatz wird lesbarer, wenn die einzelnen Selektoren untereinander dargestellt werden.

Empfehlung:

• zwischen 2 Regelsätzen sollte eine Leerzeile stehen
• Ein Umbruch sollte
  • nach der öffnenden geschweiften Klammer
  • hinter jedem Semikolon
  • und bei Selektor-Listen erfolgen
• nach dem Doppelpunkt zwischen Eigenschaft und Wert sollte ein Leerzeichen sein

Man sollte sich eine Reihenfolge für die Deklarationen überlegen:

1. Farbpalette
2. Schrift
3. Positionierung
4. Display
5. Box-Modell
6. Farben, Hintergründe und weiteres Styling

Die Deklarationen werden im Seiteninspektor in der festgelegten Reihenfolge aufgeführt, was auch zum Debuggen praktischer ist. Dabei ist anzumerken, dass bei modernen Mobile First-Layouts oft keine Positionierung mehr nötig ist.

Für größere Viewports kann man dann mit Medienabfrage weitere Festlegungen treffen.

Während media queries in den letzten Jahren vorwiegend für die Ermittlung der Breakpoints für die optimierte Darstellung auf unterschiedlich großen Bildschirmen verwendet wurden, kamen in den letzten Jahren neue Medienabfragen hinzu, die vorher getroffene Benutzereinstellungen (White or Black-Design?) abfragen.

Viele Nutzer haben in den Einstellungen des Betriebssystems und Ihres Browsers bestimmte Schriftgrößen festgelegt.

• Nutzen Sie relative Schriftgrößen in em oder rem!
• Verzichten Sie auf feste Schriftgrößen in px oder womöglich sogar pt!

Empfehlung:

• keine festen Werte für Breite
• keine festen Werte für die Höhe eines Elements, sondern lasse dem Inhalt den nötigen Platz. Abstände mithilfe von padding!
• relative Längenmaße wie em, die sich an geänderte Schriftgrößen anpassen

Verwenden Sie eine ausreichende Schriftgröße und hohe Kontraste.

Geben Sie zur verwendeten Hintergrundfarbe jeweils immer auch eine kontrastreiche Textfarbe an. Wenn ein background-image definiert wird, sollte auch die background-color definiert werden, denn ein Bild könnte fehlen.

Nutzen Sie die Möglichkeit der Medienabfragen:

• prefers-color-scheme fragt ab, ob der Nutzer ein Dark Mode oder helles Farbschema bevorzugt.
• prefers-contrast emittelt, ob Inhalte mit höherem (oder niedrigeren) Kontrast dargestellt werden soll.

@media (prefers-color-scheme: dark) {
  /* dunkles Farbschema für die Nacht */
  body {
    color: white;
    background: black;
  }


  a {
    color: skyblue;
  }
}


@media (prefers-color-scheme: light) {
  /* helles Farbschema für den Tag */
}

Bei Animationen sollte der Nutzer immer die volle Kontrolle über seinen Bildschirm haben. Entweder will er keine Animationen sehen oder eine bestimmte Animation erneut abspielen. Obwohl so etwas nur mit JavaScript erreicht werden kann, können zumnindest die Voreinstellungen abgefragt werden:

• prefers-reduced-motion (bevorzugt weniger Bewegung) erkennt, ob der Nutzer eine Seite mit allen Animationen und Bewegungen sehen oder eine ruhigere Darstellung wünscht.

Wann immer Sie die Pseudoklasse :hover einsetzen, verwenden Sie auch die Pseudoklasse :focus um Tastaturbenutzern beim Durchtabben dasselbe Feedback zu geben.

a:hover,
a:focus {
  background: skyblue;
  text-decoration: underline double navy;
}

Entfernen Sie nicht den gepunkteten Rahmen, den die Browser um fokussierte Links oder Buttons zeichnen.

Zeigen Sie für Sehende versteckte aber fokussierbare Elemente an, wenn sie den Fokus erhalten.

Browser wenden ihr eigenes Browser-Stylesheet an, bevor sie das Autoren-CSS anwenden. Die Default-Regeln können aber von Browser zu Browser abweichen.

Beispielsweise wird die Einrückung von Listen durch die Browser unterschiedlich gehandhabt. Die einen realisieren dies über Innenabstände des ul- bzw. ol-Elementes, die anderen über Außenabstände der li.

Deshalb empfehlen manche Webdesigner eine Normalisierung, bei der die CSS-Einstellungen der Browser, vor allem Abstände, Rahmen oder Schrifteinstellungen, zurückgesetzt und somit vereinheitlicht werden. Sie ist vor allem für folgende Elemente verbreitet: ul, ol, li, dl, dt, dd.

Beispiel
ul, ol, li, dl, dt, dd {
  display: block;
  padding: 0;
  margin: 0;
}
 
li {
  display: list-item; 
  margin-left: 2em;
}

Empfehlung: Vermeiden Sie weitreichende Normalisierungen, alle Default-Angaben sind sinnvoll und die meisten sind browserübergreifend sehr ähnlich.

Grundsätzlich sollte man vermeiden, mit jedem Projekt wieder bei null anzufangen. Vieles benötigt man in jedem Projekt. Das beginnt bei so profanen Dingen wie Ordnern für Bilder oder CSS, geht über das HTML-Grundgerüst und die Verknüpfung der HTML-Datei mit einer Formatvorlage und kann je nach Arbeitsumgebung bis hin zu Serverkonfigurationen per htaccess, der Einbindung von JavaScript-Bibliotheken und ganzen Frameworks gehen.

Um das alles nicht bei jedem Projekt neu anlegen zu müssen, arbeiten viele Entwickler mit selbst erstellten Vorlagen, die sie für neue Projekte nutzen.

Es gibt aber auch Projekte im Web, die solche Vorlagen kostenlos bereitstellen. Das wohl bekannteste ist die HTML5-Boilerplate von Paul Irish. Der Gedanke hinter so einer Boilerplate (englisch für Kochplatte) ist es, nicht jedes Mal einen Herd bauen zu müssen, wenn man sich ein Spiegelei braten möchte.

Die HTML5-Boilerplate bringt all die genannten Dinge mit. Darüberhinaus sind sinnvolle und meist nötige CSS-Styles bereits in der Datei main.css vorhanden, die leicht an eigene Bedürfnisse angepasst werden können.

Für Anfänger lohnt sich ein Blick auf die Boilerplate auch weil man daran eine typische und sinnvolle Struktur nachvollziehen kann.

Noch weiter gehen CSS-Frameworks zu deren bekanntesten Vertretern Bootstrap, Skeleton und Foundation zählen. Diese bringen fertige Styles für die meisten Komponenten einer Webseite mit. Dazu gehören auch komplexere Konstrukte wie Menüs, Slider oder Tabs (Karteikartenreiter). Alles responsiv und sofort nutzbar. Insbesondere bei Bootstrap sind zudem gute Grundlagen für die Entwicklung zugänglicher Webseiten vorhanden.

Empfehlung: Empfehlung: Binden Sie Bootstrap vor Ihren eigenen CSS-Festlegungen ein. So werden Ihre Einstellungen nicht wieder überschrieben!

Hiermit erstellte Webseiten sehen naturgemäß den vielen Millionen Seiten, die ebenfalls auf den Frameworks aufbauen, sehr ähnlich. Wenn man die Formatvorlagen weitgehend an ein vorgegebenes Layout anpassen möchte, beschreiben viele Entwickler den nötigen Aufwand als genauso hoch oder höher wie bei einer kompletten Eigenentwicklung.

Darüberhinaus wird oft die mangelnde Trennung von Inhalt und Layout kritisiert, die aufgrund der massenhaft eingesetzten präsentationsbezogenen Klassen nicht aufrechtzuhalten ist. Wie in den Zeiten vor CSS muss an alle Elemente geschrieben werden, wie diese aussehen sollen – insbesondere Änderungen an statischen Seiten werden so extrem aufwändig und sind fehleranfällig.

Nicht zuletzt steht mit CSS-Grid eine Technik zur Verfügung, die leicht zu nutzen ist und Teile eines solchen Frameworks (insbesondere die zum Seitenlayout) überflüssig macht.