Was ist CSS?

Cascading Style Sheets (CSS) sind eine Stylesheet-Sprache, die verwendet wird, um die Darstellung eines Dokuments zu beschreiben, das in einer Auszeichnungssprache (HTML, XHTML, SVG, XML) geschrieben ist.

Hauptfunktionen von CSS:

Trennung von Präsentation und Inhalt: Ermöglicht es, das Aussehen einer Webseite zu ändern, ohne ihre Struktur zu verändern.
Stilisierung von Elementen: Steuerung von Farben, Schriftarten, Größen, Abständen, Rahmen und anderen visuellen Eigenschaften der Elemente.
Erstellung eines responsiven Designs: Mit Media Queries können unterschiedliche Stile je nach Eigenschaften des Geräts des Nutzers angewendet werden (Bildschirmauflösung, Ausrichtung usw.).
Animationen und Übergänge: Erstellung visueller Effekte für Interaktivität und Verbesserung der Nutzererfahrung.
Layout-Management: Positionierung von Elementen auf der Seite unter Verwendung verschiedener Techniken (Flexbox, Grid, floats usw.).

Struktur einer CSS-Regel:

/* Selektor */
h1 {
  /* Anweisungen */
  color: blue; /* Eigenschaft: Wert; */
  font-size: 24px;
}

Hauptmethoden, um CSS mit einem HTML-Dokument zu verbinden:

Externe Datei (<link>): Die gebräuchlichste und empfohlene Methode. Styles werden in einer separaten .css-Datei gespeichert.
```
<link rel="stylesheet" href="styles.css">
```
Innerhalb des <style>-Tags: Styles werden direkt im HTML-Dokument definiert, meist im <head>-Abschnitt. Geeignet für kleine Styles oder schnelle Tests.
```
<style>
  p {
    line-height: 1.5;
  }
</style>
```
Inline-Styles (style-Attribut): Styles werden auf ein bestimmtes HTML-Element angewendet, indem das style-Attribut verwendet wird. Hat eine hohe Priorität, erschwert jedoch Wartung und Skalierung.
```
<div style="border: 1px solid black;">
  Dies ist ein div mit Inline-Style.
</div>
```

Die Kaskadierung bestimmt, wie der Browser die Styles anwendet, wenn mehrere Regeln für dasselbe Element konkurrieren. Es wird berücksichtigt:

Priorität der Selektoren: Spezifischere Selektoren haben eine höhere Priorität.
Reihenfolge: Spätere Regeln überschreiben frühere mit gleicher Priorität.
Wichtigkeit (!important): Deklarationen mit !important haben die höchste Priorität (mit Vorsicht verwenden).
Quelle der Styles: Styles des Autors haben eine höhere Priorität als Styles des Benutzers oder die Standardstile des Browsers.