Summary  
This chapter explains how to declare and use CSS custom properties (variables) in the :root selector and apply them with var(), enabling easy updates and targeted overrides through selector specificity.

General domain of usage  
Front-end web development

## Variablen
CSS-Variablen (benutzerdefinierte Eigenschaften) ermöglichen das Speichern wiederverwendbarer Werte, wodurch sich Styles leichter aktualisieren und pflegen lassen.

Variablen werden im `:root`-Selektor deklariert und mit `--` vorangestellt:

```css
:root {
  --blue-color: #3f42f3;
}
```

Nach der Deklaration einer Variablen kann diese mit der Funktion `var()` auf jede CSS-Eigenschaft angewendet werden. Um beispielsweise der Eigenschaft `color` eines `<h1>`-Elements den Wert unserer Variable `--blue-color` zuzuweisen, kann folgender Code verwendet werden:

``` css
h1 {
  color: var(--blue-color);
}

Im folgenden Beispiel werden Deklaration und Verwendung von Variablen kombiniert:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJjYXJkIj4KICAgICAgPGgyIGNsYXNzPSJjYXJkLXRpdGxlIj5QcmVtaXVtIFVJIERlc2lnbjwvaDI+CiAgICAgIDxwIGNsYXNzPSJjYXJkLXRleHQiPgogICAgICAgIFRoaXMgY2FyZCBkZW1vbnN0cmF0ZXMgdGhlIHBvd2VyIG9mIENTUyB2YXJpYWJsZXMuCiAgICAgIDwvcD4KICAgICAgPGJ1dHRvbiBjbGFzcz0iY2FyZC1idXR0b24iPkdldCBTdGFydGVkPC9idXR0b24+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwo6cm9vdCB7CiAgLS1iYWNrZ3JvdW5kLWNvbG9yOiAjMWMxYjI5OwogIC0tdGV4dC1jb2xvcjogI2YwZjBmNTsKICAtLWNhcmQtYmc6ICMyNzI2M2I7CiAgLS1idXR0b24tYmc6ICNmZjdmNTA7CiAgLS1idXR0b24taG92ZXI6ICNmZjYzNDc7CiAgLS1ib3JkZXItY29sb3I6ICM0YTQ5Njg7Cn0KCi8qIEFwcGx5IHZhcmlhYmxlcyB0byBib2R5ICovCmJvZHkgewogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWJhY2tncm91bmQtY29sb3IpOwogIGNvbG9yOiB2YXIoLS10ZXh0LWNvbG9yKTsKfQoKLyogQ2FyZCBjb21wb25lbnQgKi8KLmNhcmQgewogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNhcmQtYmcpOwogIGJvcmRlcjogMnB4IHNvbGlkIHZhcigtLWJvcmRlci1jb2xvcik7Cn0KCi8qIFRpdGxlICovCi5jYXJkLXRpdGxlIHsKICBjb2xvcjogdmFyKC0tdGV4dC1jb2xvcik7Cn0KCi8qIFRleHQgKi8KLmNhcmQtdGV4dCB7CiAgY29sb3I6IHZhcigtLXRleHQtY29sb3IpOwp9CgovKiBCdXR0b24gKi8KLmNhcmQtYnV0dG9uIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1idXR0b24tYmcpOwp9CgovKiBCdXR0b24gaG92ZXIgZWZmZWN0ICovCi5jYXJkLWJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tYnV0dG9uLWhvdmVyKTsKfQoKLyogQWRkaXRpb25hbCBzdHlsZXMgZm9yIGJldHRlciBhcHBlYXJhbmNlIChub3QgdGhlIGN1cnJlbnQgZm9jdXMpICovCmJvZHkgewogIGZvbnQtZmFtaWx5OiBBcmlhbCwgc2Fucy1zZXJpZjsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgaGVpZ2h0OiAxMDB2aDsKICBtYXJnaW46IDA7Cn0KCi5jYXJkIHsKICBwYWRkaW5nOiAyNXB4OwogIGJvcmRlci1yYWRpdXM6IDEycHg7CiAgYm94LXNoYWRvdzogNHB4IDRweCAxNXB4IHJnYmEoMCwgMCwgMCwgMC4yKTsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgd2lkdGg6IDMyMHB4Owp9CgouY2FyZC10aXRsZSB7CiAgZm9udC1zaXplOiAyMnB4OwogIG1hcmdpbi1ib3R0b206IDEycHg7Cn0KCi5jYXJkLXRleHQgewogIGZvbnQtc2l6ZTogMTZweDsKICBtYXJnaW4tYm90dG9tOiAyMHB4Owp9CgouY2FyZC1idXR0b24gewogIGNvbG9yOiB3aGl0ZTsKICBib3JkZXI6IG5vbmU7CiAgcGFkZGluZzogMTJweCAyNHB4OwogIGZvbnQtc2l6ZTogMTZweDsKICBmb250LXdlaWdodDogYm9sZDsKICBjdXJzb3I6IHBvaW50ZXI7CiAgYm9yZGVyLXJhZGl1czogNnB4OwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlLCB0cmFuc2Zvcm0gMC4xcyBlYXNlLWluLW91dDsKfQoKLmNhcmQtYnV0dG9uOmhvdmVyIHsKICB0cmFuc2Zvcm06IHNjYWxlKDEuMDUpOwp9

In diesem Beispiel steuern mehrere Variablen die Farben der Karte. Das Aktualisieren einer einzelnen Variablen aktualisiert die Stile überall dort, wo sie verwendet wird.

## Eigenschaften überschreiben
Um bestimmte Stile innerhalb einer Komponente zu ändern, definieren Sie dieselbe Eigenschaft in einem spezifischeren Selektor neu.

Beispiel (Ampel):

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJ0cmFmZmljLWxpZ2h0Ij4KICAgICAgPHAgY2xhc3M9InNpZ25hbCBzdG9wIj5TdG9wPC9wPgogICAgICA8cCBjbGFzcz0ic2lnbmFsIHNsb3ctZG93biI+U2xvdyBEb3duPC9wPgogICAgICA8cCBjbGFzcz0ic2lnbmFsIHByb2NlZWQiPlByb2NlZWQ8L3A+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwouc2lnbmFsIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBibHVlOyAvKiBEZWZhdWx0IGJhY2tncm91bmQgY29sb3IgKi8KICBjb2xvcjogd2hpdGU7IC8qIERlZmF1bHQgdGV4dCBjb2xvciAqLwp9CgovKiBPdmVycmlkZSBjb2xvcnMgZm9yIHRyYWZmaWMgbGlnaHRzICovCi5zdG9wIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7Cn0KCi5zbG93LWRvd24gewogIGJhY2tncm91bmQtY29sb3I6IHllbGxvdzsKICBjb2xvcjogYmxhY2s7IC8qIEJldHRlciBjb250cmFzdCBmb3IgeWVsbG93ICovCn0KCi5wcm9jZWVkIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBncmVlbjsKfQoKLyogQWRkaXRpb25hbCBzdHlsZXMgZm9yIGJldHRlciBhcHBlYXJhbmNlIChub3QgdGhlIGN1cnJlbnQgZm9jdXMpICovCmJvZHkgewogIGZvbnQtZmFtaWx5OiAnUm9ib3RvJywgc2Fucy1zZXJpZjsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBiYWNrZ3JvdW5kLWNvbG9yOiBsaWdodGdyYXk7CiAgbWFyZ2luOiAwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKfQoKLnRyYWZmaWMtbGlnaHQgewogIGJhY2tncm91bmQtY29sb3I6IGJsYWNrOwogIHBhZGRpbmc6IDEwcHg7CiAgbWFyZ2luLXRvcDogMjBweDsKICBib3JkZXItcmFkaXVzOiAxNXB4OwogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBib3gtc2hhZG93OiA0cHggNHB4IDEwcHggcmdiYSgwLCAwLCAwLCAwLjUpOwp9Cgouc2lnbmFsIHsKICBmb250LXNpemU6IDE0cHg7CiAgZm9udC13ZWlnaHQ6IDYwMDsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgd2lkdGg6IDgwcHg7CiAgaGVpZ2h0OiA4MHB4OwogIGJvcmRlci1yYWRpdXM6IDUwJTsKICBtYXJnaW46IDEwcHggYXV0bzsKICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlOwogIG1hcmdpbjogMDsKfQoKLnNpZ25hbDpub3QoOmxhc3QtY2hpbGQpIHsKICBtYXJnaW4tcmlnaHQ6IDEwcHg7Cn0=

Die Basisklasse `.signal` enthält gemeinsame Stile, während `.stop`, `.slow-down` und `.proceed` individuelle Farben überschreiben.

CSS-Variablen erhöhen Flexibilität und Wartbarkeit.

Überschreiben ermöglicht eine gezielte Anpassung von Stilen, ohne gemeinsame Regeln zu wiederholen.

Zusammenfassung

Beherrschen Sie die Grundlagen von CSS (Cascading Style Sheets), der Gestaltungssprache, die das Erscheinungsbild von Webseiten verändert. Erforschen Sie zentrale Konzepte wie Textstile, Farben, Abstände, das Box-Modell, Flexbox und dekorative Effekte. Entwickeln Sie Fähigkeiten zur Erstellung ansprechender und gut strukturierter Webseiten. Ideal für Einsteiger, die eine solide Grundlage in CSS aufbauen möchten.

Erfahren Sie, was CSS ist, wie es mit HTML verbunden wird und wie HTML-Elemente mithilfe von Selektoren gestaltet werden. Entdecken Sie grundlegende Konzepte wie Textfarben, Pseudoklassen für Benutzeraktionen und Variablen in CSS.

Erfahren Sie, wie Sie Text auf Ihren Webseiten gestalten und formatieren. Lernen Sie, benutzerdefinierte Schriftarten anzuwenden und verschiedene Schriftarteigenschaften zu erkunden, um das Erscheinungsbild von Text zu verbessern.

Erlernen der Grundlagen des Box-Modells, das das Layout und die Abstände von Elementen auf einer Webseite definiert. Untersuchung von Konzepten wie Box-Sizing, Hinzufügen von Abstand zu Elementen, Arbeiten mit Block- und Inline-Elementen sowie Nutzung struktureller und funktionaler Pseudoklassen für fortgeschrittenes Styling.

Entdecken Sie Flexbox, eine leistungsstarke CSS-Layoutmethode zur Anordnung von Elementen in Zeilen und Spalten. Erfahren Sie, wie Sie Richtung, Ausrichtung und Abstand von Elementen horizontal und vertikal steuern sowie einzelne Flex-Elemente für präzise Layouts anpassen können.

Erfahren Sie, wie Sie mit CSS die visuelle Attraktivität Ihrer Webseiten steigern. Entdecken Sie Techniken zur Anwendung von Hintergrundfarben und -bildern, zum Stylen von Bildern, zur Nutzung dekorativer Pseudoelemente und zum Hinzufügen von Schatten für beeindruckende Designs.

Optimierung des Workflows für effizientes CSS-Coding

Variablen

Eigenschaften überschreiben

Optimierung des Workflows für effizientes CSS-Coding

Variablen

Eigenschaften überschreiben