CSS einbinden & die Anatomie einer Regel
Bevor CSS irgendetwas stylt, muss es überhaupt mit dem HTML verbunden sein. Es gibt drei Wege — und nur einer ist für echte Projekte gemeint. Danach: wie eine CSS-Regel aufgebaut ist und wie du Elemente triffst.
Drei Wege, CSS einzubinden
1. Extern (der richtige Weg) ✅
Stile in einer eigenen .css-Datei, per <link> eingebunden. Eine Datei stylt die ganze Website, der Browser kann sie cachen.
HTML
<!-- in der HTML-Datei, im <head> -->
<link rel="stylesheet" href="styles.css">2. Intern (für eine einzelne Seite) ◐
Ein <style>-Block im <head>. Okay für eine schnelle Demo oder eine einzige Seite.
HTML
<head>
<style>
body { font-family: system-ui; }
h1 { color: #4f46e5; }
</style>
</head>3. Inline (Notlösung) ⚠️
Direkt am Element per style-Attribut. Nicht wiederverwendbar, schwer zu überschreiben, bläht das HTML auf — und genau das streuen KI-Tools gern in Massen.
HTML
<h1 style="color: #4f46e5; margin: 0;">Titel</h1>Die Anatomie einer Regel
Eine CSS-Regel besteht immer aus denselben Teilen:
.button {
background: #4f46e5;
padding: 8px 16px;
}
background: #4f46e5;
padding: 8px 16px;
}
- Selektor (.button) — welche Elemente?
- Eigenschaft / Property (background) — was ändern?
- Wert (#4f46e5) — worauf setzen?
- Property + Wert zusammen = eine Deklaration, beendet mit einem ;. Mehrere stehen in { }.
Die Grund-Selektoren
CSSdie wichtigsten Treffer-Arten
/* Element — alle <p> */
p { line-height: 1.6; }
/* Klasse — alle mit class="hinweis" */
.hinweis { color: #b45309; }
/* ID — das eine Element mit id="hero" */
#hero { min-height: 100vh; }
/* Nachfahre — <a> irgendwo in einem <nav> */
nav a { text-decoration: none; }
/* Gruppierung — gleiche Regel für mehrere */
h1, h2, h3 { font-family: Georgia, serif; }
/* Zustand (Pseudo-Klasse) — beim Drüberfahren */
button:hover { background: #4338ca; }Faustregel: Style nach .klasse, nicht nach #id oder Tag-Namen. Klassen sind wiederverwendbar und halten die Spezifität niedrig (warum das wichtig ist, kommt in der nächsten Lektion).
Warum eigentlich? — Warum ist externes CSS dem Inline-Style überlegen?
- Eine Quelle der Wahrheit: die Button-Farbe steht an einer Stelle, nicht 50-mal verstreut.
- Caching: der Browser lädt die CSS-Datei einmal und wiederverwendet sie auf allen Seiten.
- Trennung: Inhalt (HTML) und Aussehen (CSS) bleiben getrennt — du kannst das eine ändern, ohne das andere anzufassen.
Häufiger Denkfehler — Überall style-Attribute (das KI-Muster)
Wenn jedes Element sein eigenes style="…" trägt, hast du kein wartbares CSS mehr, sondern 200 Einzelfälle. Genau das produzieren manche KI-Tools, weil sie Element für Element „dekorieren". Lösung: wiederkehrende Stile zu Klassen zusammenfassen. Wir greifen das in der KI-HTML-Sektion gezielt wieder auf.
Tiefer rein — Pseudo-Klassen, Pseudo-Elemente & Kombinatoren
- Pseudo-Klassen beschreiben einen Zustand: :hover, :focus, :first-child, :nth-child(2n).
- Pseudo-Elemente erzeugen/treffen Teile: ::before, ::after, ::placeholder.
- Kombinatoren verbinden Selektoren: A B (Nachfahre), A > B (direktes Kind), A + B (direkt danach), A ~ B (Geschwister danach).