[[..:start|zurück]] ====== CSS – Grundlagen ====== CSS (Cascading Style Sheets) beschreibt die **Darstellung** von HTML-Inhalten. CSS legt fest: * Farben * Schriftarten * Abstände * Layout * Responsives Verhalten HTML beschreibt **was** etwas ist, CSS beschreibt **wie** es aussieht. --- ===== Einbindung von CSS ===== Es gibt drei Möglichkeiten, CSS einzubinden. ^ Methode ^ Beschreibung ^ | extern | separate CSS-Datei | | intern | ` Geeignet für: * kleine Tests * Einzelseiten --- ===== Inline-CSS =====


Text

⚠️ Nicht empfohlen: * schwer wartbar * überschreibt andere Regeln --- ===== CSS-Syntax =====


selektor {
  eigenschaft: wert;
}

Beispiel:


p {
  color: black;
  font-size: 16px;
}

--- ===== Selektoren (Grundlagen) ===== ^ Selektor ^ Bedeutung ^ | `p` | Element | | `.klasse` | Klasse | | `#id` | ID | | `*` | alle Elemente | --- ===== Klassen und IDs =====


Text
Text


.info {
  color: blue;
}

#hinweis {
  color: red;
}

Regeln: * Klassen sind wiederverwendbar * IDs sind eindeutig --- ===== Kaskade und Priorität ===== CSS folgt einer klaren Priorität: * Inline-CSS * ID-Selektoren * Klassen * Element-Selektoren Spätere Regeln überschreiben frühere, wenn die Spezifität gleich ist. --- ===== !important =====


p {
  color: red !important;
}

⚠️ Nur im Ausnahmefall verwenden. Ein Zeichen für strukturelle Probleme. --- ===== Kommentare =====


/* Kommentar */

--- ===== Best Practices ===== * externes CSS verwenden * klare Klassennamen * keine IDs für Styling missbrauchen * Layout nicht mit Farbe verwechseln --- ===== Merksatz ===== > CSS ist mächtig, > > aber nur so gut wie die HTML-Struktur darunter.