Lädt...

CSS Einführung

Einfaches HTML kann Text und Links zeigen, aber Seiten wirken unfertig, bis Sie Farbe, Abstände und Layout steuern. CSS ist die Sprache, die strukturiertes Markup in eine gestaltete Seite verwandelt.

Was ist CSS?

CSS (Cascading Style Sheets) ist die Standardsprache zum Gestalten von HTML-Dokumenten. Sie schreiben Regeln, die dem Browser sagen, wie Elemente aussehen sollen: Textfarbe, Schriften, Ränder, Hintergründe, Layout und mehr. HTML beantwortet „Was ist dieser Inhalt?“ CSS beantwortet „Wie soll er erscheinen?“

HTML und CSS arbeiten zusammen

Sehen Sie HTML als Skelett der Seite und CSS als Kleidung und Feinschliff. Sie brauchen weiterhin solides HTML — Überschriften, Absätze, Links und Landmarks — damit CSS sinnvolle Elemente gestalten kann. Dieser Kurs setzt Grundkenntnisse in HTML voraus.

📊 Rollen von HTML vs. CSS

Schicht	Hauptaufgabe	Typische Fragen
HTML	Struktur und Bedeutung	Ist das eine Überschrift, ein Absatz oder ein Link?
CSS	Darstellung und Layout	Welche Farbe, Größe, Abstände und Anordnung?
JavaScript (später)	Verhalten und Interaktion	Was passiert beim Klick?

JavaScript lernen Sie in einem späteren Kurs. Halten Sie die Trennung klar: Struktur in HTML, Erscheinungsbild in CSS.

Erster Blick auf eine CSS-Regel

Eine CSS-Regel hat einen Selektor (was gestalten) und Deklarationen (wie gestalten). Deklarationen stehen in geschweiften Klammern und nutzen Eigenschaft und Wert.

Eine einfache Regel

css

CSS Code

h1 {
color: navy;
font-size: 2rem;
}

Was diese Regel tut

h1 ist der Selektor — er trifft jedes h1-Element
color: navy; setzt die Textfarbe
font-size: 2rem; setzt die Überschriftengröße
Jede Deklaration endet mit einem Semikolon
Selektoren und Einheiten vertiefen Sie später. Hier reicht die Form der Regel.

CSS auf einer Seite sehen

Browser wenden CSS-Regeln auf passende HTML-Elemente an. Unten nutzt eine kurze Seite einen internen <style>-Block, damit Sie HTML und CSS in einer Datei sehen. Spätere Sessions behandeln externe Stylesheets und andere Wege, CSS einzubinden.

HTML mit style-Block

html

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>CSS Demo</title>
<style>
body {
font-family: Georgia, serif;
background-color: #f5f7fb;
}
h1 {
color: #1a365d;
}
p {
color: #334155;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Styled with CSS</h1>
<p>This paragraph uses the p rule above.</p>
</body>
</html>

Was sich geändert hat

Ohne die <style>-Regeln nutzt die Seite das Standardlook des Browsers. Mit CSS wird der Hintergrund weicher, die Überschrift dunkelblau und der Absatz besser lesbar. Gleicher HTML-Inhalt — andere Darstellung.

Warum „cascading“ zählt (Vorschau)

„Cascading“ in CSS bedeutet: Styles können von mehreren Stellen kommen und der Browser löst mit Cascade und Spezifität, welche Regel gewinnt. Den vollen Algorithmus brauchen Sie noch nicht. Merken Sie sich: Mehrere Regeln können dasselbe Element treffen, und CSS hat ein klares System für den finalen Look. Spätere Sessions zu Cascade und Spezifität machen das praktisch.

Selbst ausprobieren

Erstellen Sie eine Datei namens intro.html.
Fügen Sie das HTML-mit-style-Beispiel ein, speichern und im Browser öffnen.
Ändern Sie color: #1a365d; in der h1-Regel zu color: teal;, speichern und aktualisieren.
Prüfen Sie die Überschriftfarbe. Ändert sich nichts, Datei speichern und den richtigen Tab prüfen.

Häufige Fehler

Erwarten, dass CSS die Seitenstruktur erzeugt — nutzen Sie HTML-Elemente für Überschriften, Listen und Links; gestalten Sie sie mit CSS
Eigenschaftsnamen ohne Selektor oder Klammern schreiben, sodass der Browser Deklarationen ignoriert
Semikolon nach einer Deklaration vergessen, was die nächste Eigenschaft in derselben Regel brechen kann
Sichtbaren Inhalt nur in CSS legen — CSS gestaltet Inhalt; es ersetzt keinen HTML-Text

Zusammenfassung

CSS gestaltet HTML-Seiten: Farben, Schriften, Abstände, Layout und Darstellung
HTML strukturiert Inhalt; CSS steuert, wie er aussieht
Eine CSS-Regel paart einen Selektor mit Eigenschaft/Wert-Deklarationen in { }
Starten Sie mit einem <style>-Block, später externe Stylesheets
Cascading heißt: Mehrere Regeln können gelten; spätere Lektionen erklären, welche gewinnt
Üben Sie, indem Sie eine kleine Regel ändern und den Browser aktualisieren

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓

Fragen

🎯

70%

Zum Bestehen

♾️

∞

Zeit

🔄

∞

Versuche

📝 Anweisungen

Lesen Sie jede Frage sorgfältig
Wählen Sie die beste Antwort für jede Frage
Sie können das Quiz so oft wiederholen, wie Sie möchten
Ihr Fortschritt wird oben angezeigt

Sprache