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].

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].

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

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

• 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].

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

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

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

Die Stilregeln stehen direkt im HTML-Dokument innerhalb des <style>-Tags im Head-Bereich[cite: 12].

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

Stile werden direkt im jeweiligen HTML-Element über das style-Attribut angegeben[cite: 12].

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

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].

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].

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].

CSS unterstützt verschiedene Einheiten zur Größenangabe[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>