====== Einführung in CSS ======

Diese Dokumentation bietet einen grundlegenden Überblick über Cascading Style Sheets (CSS), deren Vorteile, Syntax, Einbindung, Vererbungsverhalten und Maßeinheiten basierend auf den Schulungsunterlagen[cite: 12].

===== 1. Vorteile von CSS =====

CSS dient der sauberen Trennung von Inhalt/Struktur (HTML) und Präsentation (Design)[cite: 12]. Die Hauptvorteile umfassen:
  * **Präzise Kontrolle:** Detaillierte Steuerung von Typografie und Seitenlayout[cite: 12].
  * **Effizienz:** Das Aussehen der gesamten Website kann zentral über eine einzige Datei angepasst werden[cite: 12].
  * **Zugänglichkeit (Barrierefreiheit):** Das HTML-Markup bleibt frei von Design-Code und behält seine rein semantische Struktur[cite: 12].
  * **Flexibilität:** Dasselbe HTML-Dokument kann durch unterschiedliche Stylesheets völlig neu dargestellt werden (z. B. *CSS Zen Garden*)[cite: 12].

===== 2. Syntax & Aufbau von Stilregeln =====

Eine CSS-Regel besteht aus einem **Selektor** und einem **Deklarationsblock**[cite: 12].

<code css>
/* Aufbau einer CSS-Regel */
selektor {
  eigenschaft1: wert1;
  eigenschaft2: wert2;
}
</code>

==== Grundbestandteile ====
  * **Selektor:** Wählt das Ziel-Element aus (z. B. Elementtyp-Selektoren wie ''p'' oder ID-Selektoren wie ''#intro'')[cite: 12].
  * **Deklaration:** Ein Eigenschafts-/Wertpaar innerhalb geschweifter Klammern ''{ }''[cite: 12].
  * **Semikolon:** Jede Deklaration muss mit einem Semikolon '';'' abgeschlossen werden[cite: 12].
  * **Kommentare:** Werden mit ''/* Kommentar */'' eingefügt und vom Browser beim Rendern ignoriert[cite: 12].

===== 3. Methoden zur Stileinbindung =====

Es gibt drei Möglichkeiten, CSS-Stile an ein Dokument anzuhängen[cite: 12]:

==== A) Externe Stylesheets ====
Eine separate CSS-Datei, die über ein ''<link>''-Tag im HTML-Head eingebunden oder per ''@import''-Regel geladen wird[cite: 12].

<code html>
<!-- Einbindung über den HTML-Head -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>
</code>

==== B) Eingebettete Stylesheets (Embedded) ====
Die Stilregeln stehen direkt im HTML-Dokument innerhalb des ''<style>''-Tags im Head-Bereich[cite: 12].

<code html>
<head>
  <style>
    body {
      background-color: #f4f4f4;
    }
  </style>
</head>
</code>

==== C) Inline Styles ====
Stile werden direkt im jeweiligen HTML-Element über das ''style''-Attribut angegeben[cite: 12].

<code html>
<p style="color: red; font-size: large;">Dieser Text ist rot.</p>
</code>

===== 4. Vererbung & Die Kaskade =====

==== Vererbung (Inheritance) ====
Eigenschaften werden entlang des Dokumentbaums (Parent-Child-Beziehung) an untergeordnete Elemente weitergereicht[cite: 12]:
  * **Typische Vererbung:** Textbezogene Eigenschaften (z. B. ''font-family'', ''color'') werden meist vererbt[cite: 12].
  * **Keine Vererbung:** Layout- und Box-bezogene Eigenschaften (z. B. ''margin'', ''padding'', ''border'') werden i. d. R. nicht vererbt[cite: 12].

==== Die Kaskade (Conflict Resolution) ====
Treffen mehrere Regeln auf dasselbe Element zu, entscheidet das Kaskadensystem anhand folgender Kriterien über die Priorität[cite: 12]:
  1. **Ursprung & Priorität:** Stile des Nutzers mit ''!important'' vor Autoren-Stilen (Website-Entwickler) vor Standard-Browser-Stilen (User Agent)[cite: 12].
  2. **Spezifität:** Spezifischere Selektoren (z. B. ID-Selektoren) wiegen schwerer als allgemeine Element-Selektoren[cite: 12].
  3. **Reihenfolge:** Bei gleichem Gewicht gewinnt die Stilregel, die als letztes im Code analysiert/ausgeführt wird (Nähe zum Inhalt)[cite: 12].

===== 5. Das Box-Modell =====

Browser betrachten jedes Element auf der Seite als ein rechteckiges Feld (Box)[cite: 12]. Es bildet die Grundlage für das Layouting und besteht aus[cite: 12]:
  * **Content:** Der eigentliche Inhalt (Text, Bild etc.)[cite: 12].
  * **Padding:** Innenabstand zwischen Inhalt und Rahmen[cite: 12].
  * **Border:** Der umgebende Rahmen[cite: 12].
  * **Margin:** Außenabstand zu benachbarten Elementen[cite: 12].

===== 6. CSS-Maßeinheiten =====

CSS unterstützt verschiedene Einheiten zur Größenangabe[cite: 12]:

^ Typ ^ Einheit ^ Beschreibung ^
| **Absolute Einheiten** | ''px'' | Pixel; feste Größe, Standard für Bildschirme[cite: 12]. |
| | ''pt'', ''cm'', ''in'' | Punkte, Zentimeter, Inch; primär für Drucklayouts gedacht[cite: 12]. |
| **Relative Einheiten** | ''em'' | Relativ zur Schriftgröße des aktuellen/übergeordneten Elements[cite: 12]. |
| | ''rem'' | **Root em:** Relativ zur Schriftgröße des Wurzel-Elements (''<html>'')[cite: 12]. |
| | ''vh'' / ''vw'' | **Viewport Height/Width:** Relativ zur Höhe/Breite des Browserfensters (1vh/vw = 1% des Viewports)[cite: 12]. |
| **Prozent** | ''%'' | Relativ zur entsprechenden Eigenschaft des Eltern-Elements[cite: 12]. |

<note icon>
**Entwickler-Tipp:** Moderne Browser stellen über die **Developer Tools** (Entwicklerwerkzeuge) umfangreiche Inspektoren bereit, um das Box-Modell, angewendete Kaskaden-Regeln sowie die HTML-Struktur in Echtzeit zu analysieren[cite: 12].
</note>