CSStutorial

Was ist CSS?

CSS steht für Cascading Style Sheets und ist die Sprache, mit der du Webseiten gestaltest. Während HTML die Struktur einer Seite beschreibt – welche Überschriften, Absätze und Bilder vorhanden sind – legt CSS fest, wie diese Elemente aussehen: Farben, Schriften, Abstände, Größen und Layouts. Ohne CSS würden alle Webseiten grau und unformatiert aussehen, wie ein Word-Dokument ohne jede Gestaltung.

CSS wird von allen modernen Browsern verstanden und ist zusammen mit HTML und JavaScript einer der drei Grundpfeiler des Webs. Du schreibst CSS-Regeln, die der Browser liest und dann auf die passenden HTML-Elemente anwendet. In diesem Tutorial lernst du Schritt für Schritt, wie du Seiten gestaltest, Layouts baust und am Ende eigene ansprechende Webkomponenten erstellen kannst.

So nutzt du die Inhalte

Ein kurzer Ablauf, damit du direkt mit den Kapiteln und Beispielen starten kannst.

1. Lies und probiere aus

Lies jedes Kapitel und tippe den Beispielcode direkt in eine eigene CSS-Datei. Sieh sofort, was sich verändert.

2. Experimentiere mutig

Ändere Farben, Größen und Werte im Code. Im Browser kannst du mit den Entwicklertools (F12) live ausprobieren.

3. Baue eigene Projekte

Kombiniere mehrere Kapitel zu kleinen Projekten: eine Profilseite, eine Bildergalerie oder eine Navigationsleiste.

Inhaltsverzeichnis

Vorarbeiten: Setup & Verknüpfung Kapitel 1: Warum CSS? Kapitel 2: Selektoren Kapitel 3: Farben & Hintergründe Kapitel 4: Das Box-Modell Kapitel 5: Schrift & Text Kapitel 6: Display & Positionierung Kapitel 7: Flexbox Kapitel 8: CSS Grid Kapitel 9: Responsive Design Kapitel 10: Übergänge & Animationen Kapitel 11: CSS-Variablen Kapitel 12: Mini-Projekt – Navbar & Cards

Vorarbeiten

Setup: VS Code, Browser & CSS-Datei anlegen

Bevor du mit CSS loslegst, brauchst du zwei Dinge: einen Code-Editor und einen Webbrowser. Als Editor empfiehlt sich Visual Studio Code (kostenlos unter code.visualstudio.com), da er CSS-Syntaxhervorhebung, automatische Vervollständigung und eine Live-Vorschau per Erweiterung bietet. Als Browser nimmst du am besten Google Chrome oder Firefox, weil beide exzellente Entwicklertools eingebaut haben.

Ordnerstruktur anlegen:
Erstelle einen neuen Ordner, zum Beispiel meine-webseite. Darin legst du zwei Dateien an: index.html für den HTML-Inhalt und styles.css für dein CSS. Diese saubere Trennung – Inhalt in HTML, Aussehen in CSS – ist das Grundprinzip von modernem Webdesign.

Die drei Arten, CSS einzubinden:
Es gibt drei Möglichkeiten, CSS mit einer HTML-Seite zu verbinden. Die externe CSS-Datei (empfohlen) ist die professionellste Methode: Du schreibst alles CSS in eine separate .css-Datei und verlinkst sie im HTML-<head>. So kannst du dieselbe CSS-Datei für viele HTML-Seiten gleichzeitig nutzen.

Internes CSS schreibst du direkt im <head> deiner HTML-Datei innerhalb von <style>...</style>-Tags. Das ist für schnelle Tests in Ordnung, aber für echte Projekte nicht empfehlenswert, weil CSS und HTML dann vermischt werden. Inline-CSS schreibst du direkt als style-Attribut an ein einzelnes Element: <p style="color: red;">. Das überschreibt alle anderen Stile, macht den Code aber unübersichtlich und ist schwer zu warten.

Empfehlung für Einsteiger: Nutze immer externe CSS-Dateien. Wenn du etwas schnell testen willst, kannst du die Entwicklertools deines Browsers (F12 → „Stile") benutzen – Änderungen dort sind nicht dauerhaft, aber super praktisch zum Ausprobieren.

<!-- Externe CSS-Datei einbinden (im <head> der HTML-Datei) -->
<link rel="stylesheet" href="styles.css" />

<!-- Internes CSS (direkt im <head>, nicht empfohlen für Projekte) -->
<style>
  p { color: blue; }
</style>

<!-- Inline-CSS (direkt am Element, nur für Ausnahmen) -->
<p style="color: red; font-size: 18px;">Roter Text</p>

Offizielle Seiten: Visual Studio Code & MDN Web Docs – CSS

Jetzt geht es los!

Kapitel 1: Warum CSS?

Voraussetzung: In diesem Kapitel arbeitest du mit HTML-Elementen wie <h1>, <p> und <div>. Falls du HTML noch nicht kennst, arbeite zuerst das HTML-Tutorial durch – besonders die ersten fünf Kapitel.

CSS ist die Sprache, die das Web erst wirklich lebendig macht. Ohne CSS würde jede Webseite aussehen wie ein reines Textdokument: schwarze Schrift auf weißem Hintergrund, keine Farben, keine Abstände, keine Layouts. Alle großen Webseiten, die du täglich nutzt – Google, YouTube, Instagram, Wikipedia – setzen CSS ein, um ihr unverwechselbares Aussehen zu erzeugen.

Wie funktioniert CSS grundsätzlich?
Eine CSS-Regel besteht immer aus zwei Teilen: dem Selektor und dem Deklarationsblock. Der Selektor sagt, welches HTML-Element angesprochen wird. Der Deklarationsblock (in geschweiften Klammern) sagt, wie es aussehen soll. Jede einzelne Stilanweisung heißt Deklaration und besteht aus einer Eigenschaft (z.B. color) und einem Wert (z.B. blue), getrennt durch einen Doppelpunkt.

Was bedeutet „Cascading"?
Das „C" in CSS steht für Cascading (Kaskade). Das bedeutet, dass mehrere CSS-Regeln auf dasselbe Element zutreffen können – und der Browser entscheidet nach festen Regeln, welche gewinnt. Dabei spielen Spezifität (wie genau spricht die Regel das Element an?) und Reihenfolge (welche Regel steht weiter unten?) eine Rolle. Inline-CSS schlägt internem CSS, das wiederum externem CSS schlägt – sofern keine Spezifitätsregeln dazwischenkommen.

Deine ersten drei CSS-Eigenschaften:
Mit nur drei Eigenschaften kannst du eine Seite schon komplett anders aussehen lassen: color bestimmt die Textfarbe, background-color die Hintergrundfarbe und font-size die Schriftgröße. Diese drei sind der absolut schnellste Einstieg in CSS – jeder Browser versteht sie, und du siehst das Ergebnis sofort.

Typischer Anfängerfehler:
Vergiss nicht, jede Deklaration mit einem Semikolon (;) zu beenden. Fehlt das Semikolon, ignoriert der Browser manchmal die gesamte Folgezeile – das ist einer der häufigsten Fehler bei CSS-Einsteigern. Halte die Entwicklertools (F12) offen, um solche Probleme schnell zu entdecken.

/* Grundstruktur einer CSS-Regel */
selektor {
  eigenschaft: wert;
  eigenschaft: wert;
}

/* Konkrete Beispiele */
body {
  background-color: #f0f4f8;
  color: #1a202c;
}

h1 {
  font-size: 2.5rem;
  color: #2b6cb0;
}

p {
  font-size: 1rem;
  color: #4a5568;
}

/* Mehrere Selektoren gleichzeitig ansprechen */
h1, h2, h3 {
  color: #2d3748;
}

/* Kommentare in CSS */
/* Das hier wird vom Browser ignoriert – nützlich für Notizen */

Pro-Tipp für alle deine CSS-Dateien:
Schreibe diese eine Zeile ganz oben in jede CSS-Datei, bevor du etwas anderes schreibst:

* {
  box-sizing: border-box;
}

Ohne diesen Trick ist eine Box mit width: 200px und padding: 20px tatsächlich 240px breit – weil Padding dazugezählt wird. Mit box-sizing: border-box bleibt sie genau 200px breit, egal wie viel Padding du setzt. Warum das so ist, erklärt Kapitel 4 (Box-Modell) genau. Bis dahin: Einfach die Zeile oben reinkopieren und nicht darüber nachdenken.

Übungsaufgaben

Einfach: Lege eine HTML-Datei mit einer Überschrift und einem Absatz an. Verknüpfe eine externe CSS-Datei und setze die Hintergrundfarbe der Seite auf Hellblau und die Textfarbe auf Dunkelblau.
Mittel: Erstelle CSS-Regeln für h1, h2 und p mit jeweils unterschiedlichen Schriftgrößen und Farben. Erkläre in einem CSS-Kommentar, was jede Regel bewirkt.
Schwer: Schreibe dieselbe Stilanweisung einmal als externe CSS-Regel, einmal intern im <style>-Tag und einmal als Inline-Stil. Beobachte, welche Regel gewinnt, und erkläre in einem Kommentar, warum.

Weiterführende Informationen: W3Schools – CSS Einführung

Kapitel 2: Selektoren

Selektoren sind das Herzstück von CSS. Sie bestimmen, welche HTML-Elemente von einer CSS-Regel betroffen sind. Ein simpler Element-Selektor wie p {} spricht alle Absätze auf der Seite an. Das ist praktisch, kann aber manchmal zu weit greifen – deshalb gibt es präzisere Selektoren.

Klassen- und ID-Selektoren:
Der Klassen-Selektor (mit einem Punkt: .meine-klasse {}) spricht alle Elemente an, die das HTML-Attribut class="meine-klasse" besitzen. Du kannst eine Klasse bei mehreren Elementen gleichzeitig einsetzen – ideal für wiederverwendbare Stile wie Karten, Buttons oder Hinweisboxen. Der ID-Selektor (mit Raute: #meine-id {}) spricht genau ein Element an, das id="meine-id" trägt. IDs sollten auf einer Seite einmalig sein.

Kombinatoren:
Mit Kombinatoren beschreibst du die Beziehung zwischen Elementen. Ein Leerzeichen steht für einen Nachfahren-Selektor: nav a {} trifft alle Links irgendwo innerhalb eines <nav>-Elements, egal wie tief verschachtelt. Ein Größer-als-Zeichen (>) ist der Kind-Selektor: ul > li {} trifft nur direkte Kinder, nicht weiter eingeschachtelte Listen. Das Plus-Zeichen (+) trifft das unmittelbar nächste Geschwisterelement.

Pseudo-Klassen:
Pseudo-Klassen beschreiben einen besonderen Zustand eines Elements. :hover gilt, wenn die Maus darüber schwebt – perfekt für Hover-Effekte bei Links und Buttons. :first-child trifft das erste Kindelement seines Elternelements. :nth-child(2n) trifft jedes zweite Element – z.B. um Tabellenzeilen abwechselnd einzufärben.

Spezifität verstehen:
CSS entscheidet bei Konflikten nach der Spezifität: ID-Selektoren (100 Punkte) schlagen Klassen-Selektoren (10 Punkte), die wiederum Element-Selektoren (1 Punkt) schlagen. !important überschreibt alles – aber Vorsicht: Zu viele !important-Regeln machen CSS schnell unübersichtlich und schwer wartbar.

/* Element-Selektor: alle Absätze */
p {
  color: #4a5568;
}

/* Klassen-Selektor: alle Elemente mit class="card" */
.card {
  background: white;
  border-radius: 8px;
  padding: 1rem;
}

/* ID-Selektor: das Element mit id="header" */
#header {
  background-color: #2d3748;
  color: white;
}

/* Nachfahren-Selektor: alle Links innerhalb von nav */
nav a {
  color: white;
  text-decoration: none;
}

/* Kind-Selektor: nur direkte li-Kinder von ul */
ul > li {
  list-style: square;
}

/* Geschwister-Selektor: das h2 direkt nach einem h1 */
h1 + h2 {
  margin-top: 0;
}

/* Pseudo-Klassen */
a:hover {
  color: #63b3ed;
  text-decoration: underline;
}

li:first-child {
  font-weight: bold;
}

tr:nth-child(2n) {
  background-color: #f7fafc;
}

Übungsaufgaben

Einfach: Erstelle eine HTML-Liste mit 5 Elementen. Style das erste Element mit :first-child fett und das letzte mit :last-child kursiv.
Mittel: Erstelle drei <div>-Elemente, von denen zwei dieselbe Klasse und eines eine einmalige ID haben. Style Klasse und ID unterschiedlich und erkläre, welche Regel bei einer Überschneidung gewinnt.
Schwer: Baue eine Navigation mit <nav><ul><li><a>. Entferne mit CSS die Aufzählungspunkte, style die Links weiß und zeige beim Hover eine andere Farbe. Nutze dafür Kombinatoren und Pseudo-Klassen.

Weiterführende Informationen: W3Schools – CSS Selektoren

Kapitel 3: Farben & Hintergründe

Farben sind eines der ausdrucksstärksten Werkzeuge in CSS. Es gibt mehrere Schreibweisen, um eine Farbe anzugeben – und es ist wichtig, den Unterschied zu kennen, weil sie sich in der Praxis alle begegnen. Die einfachste Methode sind Farbnamen wie red, blue oder coral. CSS kennt über 140 solcher Namen – praktisch für schnelle Tests, aber unpräzise für echte Projekte.

Hexadezimal-Farben:
In der Praxis am häufigsten: #ff0000 für reines Rot. Das Rautezeichen leitet den Hex-Code ein, danach folgen drei Paare (Rot, Grün, Blau) im Hexadezimalsystem (0–9 und a–f). #000000 ist Schwarz, #ffffff ist Weiß. Kurze Schreibweise: #f00 entspricht #ff0000.

RGB und RGBA:
rgb(255, 0, 0) beschreibt dieselbe Farbe (Rot) in Rot-Grün-Blau-Werten (0–255). rgba(255, 0, 0, 0.5) fügt einen vierten Wert für die Transparenz (Alpha) hinzu – 0 ist unsichtbar, 1 ist voll deckend. Das ist besonders nützlich für halbtransparente Hintergründe oder Overlays.

HSL – Farbe intuitiv beschreiben:
hsl(0, 100%, 50%) steht für Farbton (Hue, 0–360°), Sättigung (0–100%) und Helligkeit (0–100%). HSL ist das intuitivste System: Wenn du eine Farbe dunkler machen willst, senkst du einfach die Helligkeit. Wenn du eine blassere Variante möchtest, senkst du die Sättigung.

Hintergründe mit Verläufen:
Mit background: linear-gradient(Richtung, Farbe1, Farbe2) erzeugst du fließende Farbverläufe. Die Richtung kann ein Winkel (z.B. 135deg) oder eine Beschreibung (z.B. to bottom right) sein. Du kannst beliebig viele Farb-Stopps angeben.

/* Verschiedene Farb-Schreibweisen */
.box-farbnamen    { background-color: coral; color: white; }
.box-hex          { background-color: #e53e3e; color: #fff; }
.box-rgb          { background-color: rgb(229, 62, 62); }
.box-rgba         { background-color: rgba(229, 62, 62, 0.6); }
.box-hsl          { background-color: hsl(0, 75%, 57%); }

/* Hintergrundbild */
.hero {
  background-image: url("bild.jpg");
  background-size: cover;
  background-position: center;
}

/* Linearer Farbverlauf */
.gradient-simple {
  background: linear-gradient(to bottom, #667eea, #764ba2);
}

/* Diagonaler Verlauf mit drei Farben */
.gradient-multi {
  background: linear-gradient(135deg, #f6d365, #fda085, #f093fb);
}

/* Radialer Verlauf (kreisförmig) */
.gradient-radial {
  background: radial-gradient(circle, #a8edea, #fed6e3);
}

Übungsaufgaben

Einfach: Erstelle drei <div>-Boxen und weise jeder eine Farbe in einer anderen Schreibweise zu (Farbname, Hex und RGB). Alle sollen dieselbe Farbe haben – prüfe, ob sie gleich aussehen.
Mittel: Baue ein halbtransparentes dunkles Overlay über einem farbigen Hintergrund. Nutze rgba(0, 0, 0, 0.5) für das Overlay und stelle darunter eine helle Hintergrundfarbe ein.
Schwer: Gestalte eine Seite mit einem linear-gradient-Hintergrund, der mindestens drei Farben verwendet und diagonal (135°) verläuft. Platziere darauf einen Text mit einer HSL-Farbe so, dass er gut lesbar ist.

Weiterführende Informationen: W3Schools – CSS Farben

Kapitel 4: Das Box-Modell

Das Box-Modell ist eines der wichtigsten Konzepte in CSS – und eines der häufigsten Quellen für Verwirrung bei Einsteigern. Jedes HTML-Element ist in CSS eine rechteckige Box. Diese Box besteht aus vier Schichten von innen nach außen: dem Inhalt (content), dem Innenabstand (padding), dem Rahmen (border) und dem Außenabstand (margin).

Padding – Innenabstand:
Padding schafft Abstand zwischen dem Inhalt und dem Rahmen des Elements. Die Hintergrundfarbe des Elements erstreckt sich auch über den Padding-Bereich. Du kannst alle vier Seiten gleichzeitig setzen (padding: 20px), oben/unten und links/rechts (padding: 10px 20px), oder jede Seite einzeln (padding: 10px 15px 20px 5px – im Uhrzeigersinn: oben, rechts, unten, links).

Margin – Außenabstand:
Margin schafft Abstand außerhalb des Elements – also zum nächsten Element oder zum Rand des Elternelements. Ein häufig genutzter Trick: margin: 0 auto zentriert ein Block-Element horizontal, wenn es eine definierte width hat. Außerdem gibt es das Phänomen des Margin Collapse: Wenn zwei Elemente übereinander liegen, überlagern sich ihre vertikalen Margins – der größere gewinnt.

Das wichtigste CSS-Einzeiler: box-sizing: border-box
Standardmäßig gilt in CSS box-sizing: content-box: Die angegebene width gilt nur für den Inhalt. Padding und Border kommen oben drauf. Das führt zu unerwarteten Layouts, weil ein Element mit width: 200px; padding: 20px in Wirklichkeit 240px breit ist. Mit box-sizing: border-box ändert sich das: Die width schließt Padding und Border mit ein. Deshalb schreiben fast alle Entwickler diese Regel ganz am Anfang ihrer CSS-Datei: * { box-sizing: border-box; }

Warum das wichtig ist: Wenn du in Kapitel 1 mit Boxen gearbeitet hast und dich gewundert hast, warum deine Box breiter war als erwartet – hier ist die Antwort. Das Standardverhalten von CSS (box-sizing: content-box) rechnet Padding und Border zusätzlich zur angegebenen Breite. Mit box-sizing: border-box ändert sich das: Die angegebene Breite ist die Gesamtbreite der Box inklusive Padding und Border.

Zahlenbeispiel:
Ein Element mit width: 300px; padding: 20px; border: 5px solid black: Bei content-box ist es 350px breit (300+20+20+5+5). Bei border-box ist es genau 300px breit – Padding und Border werden vom Inhalt abgezogen.

/* Box-Modell Grundlagen */
.box {
  width: 300px;
  height: 150px;
  padding: 20px;         /* Innenabstand: 20px auf allen Seiten */
  border: 2px solid #4a5568;  /* Rahmen: 2px, durchgehend, grau */
  margin: 16px auto;     /* Oben/unten: 16px, links/rechts: auto (zentriert) */
  background-color: #ebf4ff;
}

/* box-sizing empfohlen – am besten global setzen */
* {
  box-sizing: border-box;
}

/* Einzelne Seiten */
.karte {
  padding-top: 12px;
  padding-right: 24px;
  padding-bottom: 12px;
  padding-left: 24px;
  /* Kurzform: padding: 12px 24px; */

  margin-bottom: 1.5rem;
  border-left: 4px solid #3182ce;
}

/* Kurzformen */
.element {
  padding: 8px 16px 8px 16px; /* oben rechts unten links */
  margin: 0 auto;             /* zentriert horizontal */
  border: 1px solid #e2e8f0;
  border-radius: 8px;         /* runde Ecken */
}

Übungsaufgaben

Einfach: Erstelle eine Box mit width: 200px, padding: 20px und border: 5px solid red. Miss die tatsächliche Breite im Browser (Entwicklertools → „Computed"). Setze danach box-sizing: border-box und vergleiche.
Mittel: Erstelle drei Boxen nebeneinander mit unterschiedlichen Paddings und Margins. Zentriere die Gruppe mit margin: 0 auto auf der Seite.
Schwer: Baue eine Infokarte: eine Box mit Hintergrundfarbe, gerundetem Rahmen (border-radius), einem farbigen linken Rand (border-left), Innenabstand und Außenabstand nach unten. Beobachte, wie sich das Box-Modell auf die Gesamtgröße auswirkt, und dokumentiere deine Beobachtung als CSS-Kommentar.

Weiterführende Informationen: W3Schools – CSS Box-Modell

Kapitel 5: Schrift & Text

Typografie – die Kunst der Schriftgestaltung – macht einen enormen Unterschied im Erscheinungsbild einer Webseite. Mit CSS hast du volle Kontrolle über Schriftart, Größe, Gewicht, Zeilenabstand und viele weitere Texteigenschaften. Die richtige Schriftgestaltung sorgt dafür, dass Texte gut lesbar und angenehm anzusehen sind.

Schriftfamilien und Fallback-Ketten:
Die Eigenschaft font-family legt die Schriftart fest. Da nicht jede Schrift auf jedem Computer installiert ist, gibst du eine Kette von Schriften an – der Browser nimmt die erste verfügbare. Am Ende der Kette steht immer eine generische Familie: serif, sans-serif oder monospace.

Schriftgrößen: px, rem und em:
px (Pixel) ist absolut und ändert sich nie. rem (root em) ist relativ zur Schriftgröße des <html>-Elements (standardmäßig 16px). 1rem = 16px, 1.5rem = 24px usw. Rem ist besonders zugänglich, weil Nutzer die Basisgröße in ihrem Browser einstellen können. em ist relativ zur Schriftgröße des Elternelements – das kann zu komplizierten Berechnungen führen, wenn Elemente verschachtelt sind.

Google Fonts einbinden:
Google Fonts bietet hunderte kostenlose Schriften. Du fügst einen <link>-Tag in den <head> deiner HTML-Datei ein und kannst die Schrift dann in CSS mit ihrem Namen nutzen. Achte darauf, nur die Schnitte (weights) zu laden, die du auch verwendest – jeder zusätzliche Schnitt verlangsamt den Seitenaufbau.

Zeilenabstand und Lesbarkeit:
Der line-height bestimmt den Abstand zwischen Textzeilen. Für Fließtext empfiehlt sich ein Wert zwischen 1.5 und 1.8 (ohne Einheit – er bezieht sich auf die aktuelle Schriftgröße). Zu geringer Zeilenabstand macht Texte schwer lesbar, zu großer wirkt zerrissen.

/* Schriftfamilie mit Fallback-Kette */
body {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 1rem;        /* = 16px standardmäßig */
  line-height: 1.6;
  color: #2d3748;
}

h1 {
  font-size: clamp(1.8rem, 4vw, 3rem); /* fluid: min, bevorzugt, max */
  font-weight: 700;       /* fett */
  letter-spacing: -0.02em;
}

p {
  font-size: 1.05rem;
  line-height: 1.75;
}

/* Google Fonts einbinden – in der HTML-Datei im <head> */
/* <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"> */

/* Text-Eigenschaften */
.article-text {
  text-align: justify;      /* Blocksatz */
  text-indent: 1.5em;       /* Einrückung der ersten Zeile */
  hyphens: auto;            /* Automatische Silbentrennung */
}

.label {
  text-transform: uppercase; /* GROSSBUCHSTABEN */
  letter-spacing: 0.1em;    /* Buchstaben-Abstand */
  font-size: 0.8rem;
}

.link {
  text-decoration: none;    /* Unterstreichung entfernen */
  font-style: italic;       /* kursiv */
}

Übungsaufgaben

Einfach: Binde eine Google-Schrift (z.B. „Roboto") in deine Seite ein und wende sie auf den gesamten Body an. Setze eine sinnvolle Schriftgröße (16–18px) und einen Zeilenabstand von 1.6.
Mittel: Erstelle einen Artikel-Bereich mit einer großen Überschrift (h1), einer Unterzeile (p.subtitle) und einem Fließtext-Absatz. Nutze unterschiedliche font-weight- und font-size-Werte, um eine klare visuelle Hierarchie zu erzeugen.
Schwer: Gestalte ein Zitat-Element (<blockquote>) mit kursiver Schrift, einem linken Rand (border-left), erhöhtem Zeilenabstand und einer leicht anderen Schriftfarbe als der normale Text. Nutze rem für alle Größenangaben.

Weiterführende Informationen: W3Schools – CSS Schriften

Kapitel 6: Display & Positionierung

Die Eigenschaft display bestimmt, wie ein Element im Layout behandelt wird. Block-Elemente (display: block) nehmen die volle verfügbare Breite ein und erzwingen einen Zeilenumbruch davor und danach. Typische Block-Elemente sind <div>, <p> und <h1>. Inline-Elemente (display: inline) fließen im Text mit und nehmen nur so viel Platz ein, wie ihr Inhalt braucht. Beispiele: <span>, <a>, <strong>.

display: inline-block:
Das Beste aus beiden Welten: Das Element fließt im Text wie ein Inline-Element, aber du kannst Breite, Höhe, Padding und Margin wie bei einem Block-Element setzen. Früher wurde inline-block viel für Navigationen und Button-Gruppen eingesetzt – heute übernehmen Flexbox und Grid diese Aufgabe besser.

Positionierung:
position: static ist der Standard – Elemente folgen dem normalen Dokumentfluss. Mit position: relative verschiebst du ein Element relativ zu seiner normalen Position, ohne andere Elemente zu beeinflussen. Mit position: absolute entfernst du das Element aus dem Fluss – es positioniert sich relativ zum nächsten Elternelement mit position: relative (oder sonst zum <body>). position: fixed klebt das Element beim Scrollen am Bildschirmrand fest. position: sticky haftet das Element beim Scrollen an einer Stelle – zum Beispiel für Navigationsleisten, die oben "hängen bleiben" sollen.

z-index:
Wenn Elemente sich überlappen, bestimmt z-index, welches vorne liegt. Höhere Werte liegen vorne. z-index funktioniert nur bei Elementen, die nicht position: static haben.

overflow:
Mit overflow steuerst du, was passiert, wenn der Inhalt größer ist als die Box. overflow: hidden schneidet überstehenden Inhalt ab – nützlich z.B. für Bilder in Karten. overflow: auto zeigt bei Bedarf eine Scrollleiste.

/* Display-Werte */
.block-element   { display: block; }
.inline-element  { display: inline; }
.hybrid-element  { display: inline-block; width: 120px; text-align: center; }
.unsichtbar      { display: none; }  /* Element verstecken (nimmt keinen Platz) */

/* Positionierung */
.elternelement {
  position: relative; /* Ankerpunkt für absolute Kinder */
  height: 200px;
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: red;
  color: white;
  border-radius: 999px;
  padding: 2px 8px;
}

/* Sticky Navigation */
nav {
  position: sticky;
  top: 0;             /* Hängt oben fest, sobald gescrollt wird */
  z-index: 100;
  background: #2d3748;
}

/* Fixed Overlay-Button */
.scroll-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
}

Übungsaufgaben

Einfach: Erstelle drei <div>-Elemente. Gib dem ersten display: block, dem zweiten display: inline und dem dritten display: inline-block. Beobachte den Unterschied im Browser.
Mittel: Baue eine Bildkarte: ein äußeres <div> mit position: relative, ein <img> und ein absolut positioniertes Badge (position: absolute; top: 8px; right: 8px).
Schwer: Erstelle eine position: sticky Navigationsleiste, die am oberen Bildschirmrand hängen bleibt. Füge darunter genug Inhalt ein (mehrere Absätze), um scrollen zu können, und verifiziere, dass die Navigation fixiert bleibt.

Weiterführende Informationen: W3Schools – CSS Display & Positionierung

Kapitel 7: Flexbox

Flexbox (Flexible Box Layout) ist das modernste und praktischste Werkzeug für eindimensionale Layouts – also wenn du Elemente in einer Zeile oder Spalte anordnen möchtest. Mit einer einzigen CSS-Eigenschaft (display: flex) auf dem Elternelement werden alle direkten Kinder zu Flex-Items und können flexibel angeordnet werden.

Hauptachse und Querachse:
Flexbox arbeitet mit zwei Achsen. Die Hauptachse (main axis) verläuft standardmäßig horizontal (von links nach rechts). Mit flex-direction: column drehst du sie um 90° – dann verläuft sie von oben nach unten. Die Querachse (cross axis) steht immer senkrecht zur Hauptachse.

Ausrichten entlang der Achsen:
justify-content steuert die Verteilung der Items entlang der Hauptachse: flex-start, flex-end, center, space-between (erster und letzter kleben an den Rändern, Rest gleichmäßig verteilt), space-around und space-evenly. align-items steuert die Ausrichtung entlang der Querachse: stretch (Standard, alle gleich hoch), center, flex-start, flex-end.

flex-wrap und gap:
Standardmäßig quetscht Flexbox alle Items in eine Zeile (nowrap). Mit flex-wrap: wrap dürfen Items in die nächste Zeile umbrechen, wenn nicht genug Platz ist. gap setzt den Abstand zwischen den Items – viel einfacher als mit Margins zu arbeiten.

flex-grow – verfügbaren Platz aufteilen:
Mit flex-grow: 1 teilt ein Item den verfügbaren Restplatz mit anderen gleichwertigen Items auf. flex-grow: 2 bekommt doppelt so viel vom freien Platz wie flex-grow: 1. Das ist ideal für Layouts, bei denen ein Bereich den Hauptinhalt einnehmen soll.

/* Einfaches Flex-Layout */
.container {
  display: flex;
  gap: 1rem;
}

/* Navigation zentriert */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}

/* Karten gleichmäßig verteilt, zeilenumbruch erlaubt */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card {
  flex: 1 1 280px; /* grow: 1, shrink: 1, basis: 280px */
}

/* Perfekte Zentrierung (vertikal & horizontal) */
.centered-box {
  display: flex;
  justify-content: center; /* Hauptachse: horizontal */
  align-items: center;     /* Querachse: vertikal */
  min-height: 100vh;       /* volle Viewport-Höhe */
}

/* Sidebar-Layout */
.layout {
  display: flex;
  gap: 2rem;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;  /* Sidebar behält ihre Größe */
}

.main-content {
  flex-grow: 1;    /* nimmt den restlichen Platz ein */
}

Übungsaufgaben

Einfach: Erstelle einen <div> mit display: flex und drei Kind-Elementen. Zentriere sie mit justify-content: center und setze einen Abstand von gap: 1rem.
Mittel: Baue eine horizontale Navigationsleiste: Links das Logo (flex-grow: 0), in der Mitte Links (display: flex; gap: 1rem), rechts ein Button. Nutze justify-content: space-between auf dem Elternelement.
Schwer: Erstelle ein responsives Karten-Layout mit flex-wrap: wrap. Jede Karte soll mindestens 280px breit sein und bei mehr Platz wachsen (flex: 1 1 280px). Füge einen gap zwischen den Karten ein.

Weiterführende Informationen: W3Schools – CSS Flexbox

Kapitel 8: CSS Grid

CSS Grid ist das mächtigste Layout-Werkzeug im modernen CSS. Während Flexbox eindimensional ist (eine Zeile oder eine Spalte), ermöglicht Grid zweidimensionale Layouts mit Zeilen und Spalten gleichzeitig. Mit display: grid auf einem Elternelement aktivierst du das Grid-System.

grid-template-columns und grid-template-rows:
Mit grid-template-columns definierst du die Spalten deines Grids. grid-template-columns: 1fr 1fr 1fr erstellt drei gleichbreite Spalten. Die Einheit fr steht für fraction (Bruchteil) und verteilt den verfügbaren Platz proportional. Mit der Funktion repeat(3, 1fr) schreibst du das kürzer. repeat(auto-fill, minmax(280px, 1fr)) ist besonders mächtig: so viele Spalten wie passen, mindestens 280px breit – ohne eine einzige Media Query!

Elemente über mehrere Spalten oder Zeilen spannen:
Mit grid-column: 1 / 3 lässt du ein Element von Spaltenlinie 1 bis Spaltenlinie 3 reichen – das entspricht zwei Spalten. Mit grid-column: span 2 kannst du einfach sagen: "dieses Element soll 2 Spalten breit sein." Dasselbe funktioniert mit grid-row für Zeilen.

Wann Flexbox, wann Grid?
Als Faustregel: Flexbox für Komponenten (Navigation, Karten-Inhalt, Button-Gruppen) – also wenn du eine Reihe von Elementen in eine Richtung anordnen willst und die Items flexibel wachsen dürfen. Grid für Seiten-Layouts (Gesamtlayout mit Header, Sidebar, Inhalt, Footer) – oder wenn du Items präzise in einem Raster platzieren willst. Beide ergänzen sich perfekt und werden oft zusammen eingesetzt.

grid-area und benannte Bereiche:
Mit grid-area kannst du einem Element einen Namen geben und dann im Container mit grid-template-areas das Layout wie eine ASCII-Art-Karte beschreiben. Das ist besonders gut lesbar und macht Layouts leicht verständlich.

/* Einfaches 3-Spalten Grid */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Responsives Grid ohne Media Query */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Verschiedene Spaltenbreiten */
.layout-sidebar {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
}

/* Elemente über mehrere Spalten/Zeilen */
.feature-card {
  grid-column: span 2; /* 2 Spalten breit */
}

/* Benannte Bereiche – Seiten-Layout */
.page-layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-content { grid-area: content; }
.page-footer  { grid-area: footer; }

Übungsaufgaben

Einfach: Erstelle ein Grid mit repeat(3, 1fr) und fülle es mit 6 Karten. Setze gap: 1rem und beobachte, wie sich die Karten automatisch anordnen.
Mittel: Baue ein Seiten-Layout mit Header (volle Breite), zwei Spalten in der Mitte (Sidebar 200px, Inhalt flexibel) und Footer (volle Breite). Nutze grid-template-areas.
Schwer: Erstelle ein Bildergalerie-Grid mit auto-fill und minmax(200px, 1fr). Lass das erste Bild zwei Spalten und zwei Zeilen breit/hoch sein (grid-column: span 2; grid-row: span 2). Passe die Größe des Browserfensters an und beobachte, wie das Grid reagiert.

Weiterführende Informationen: W3Schools – CSS Grid

Kapitel 9: Responsive Design

Responsive Design bedeutet, dass deine Webseite auf allen Bildschirmgrößen gut aussieht – vom kleinen Smartphone bis zum großen Desktop-Monitor. Das ist heute keine Option mehr, sondern Pflicht: Mehr als 60% aller Webseiten-Besuche kommen von Mobilgeräten.

Media Queries:
Der Kern von Responsive Design in CSS sind @media-Regeln. Sie erlauben dir, CSS-Regeln nur dann anzuwenden, wenn bestimmte Bedingungen erfüllt sind – z.B. wenn das Browserfenster kleiner als 768px ist. max-width: 768px bedeutet: "Diese Regeln gelten nur für Bildschirme bis 768px Breite." min-width: 1024px bedeutet: "Diese Regeln gelten nur ab 1024px Breite."

Mobile First:
Der professionelle Ansatz ist Mobile First: Du schreibst zuerst das CSS für kleine Bildschirme und erweiterst es dann für größere mit min-width-Queries. Dadurch wird das CSS für mobile Geräte leichter – sie müssen keine Desktop-Stile laden und überschreiben. Das verbessert die Ladezeit auf Mobilgeräten erheblich.

Flexible Einheiten:
vw (viewport width) und vh (viewport height) beziehen sich auf die Bildschirmgröße: 100vw = volle Breite des Browserfensters. Mit % beziehst du dich auf das Elternelement. Die Funktion clamp(min, bevorzugt, max) setzt automatisch einen Wert zwischen Minimum und Maximum: font-size: clamp(1rem, 2.5vw, 2rem) passt die Schriftgröße fließend an die Bildschirmbreite an.

Typische Breakpoints:
Es gibt keine universellen Breakpoints – du richtest dich nach deinem Inhalt. Als Orientierung werden oft folgende Werte genutzt: 480px (kleines Smartphone), 768px (Tablet), 1024px (kleines Desktop), 1280px (Desktop). Wichtiger als feste Breakpoints ist es, den Inhalt zu beobachten: Bricht es komisch um? Dann braucht es einen Breakpoint.

/* Mobile First: Basis-CSS für kleine Bildschirme */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;  /* 1 Spalte auf Mobilgeräten */
  gap: 1rem;
}

/* Ab 600px: 2 Spalten */
@media (min-width: 600px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Ab 1024px: 3 Spalten */
@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Fluid Typography mit clamp() */
h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  /* Minimum: 1.5rem, bevorzugt: 5% der Viewport-Breite, Maximum: 3rem */
}

/* Responsive Breite mit min() */
.container {
  width: min(1200px, 100% - 2rem);
  margin: 0 auto;
}

/* Bild responsiv machen */
img {
  max-width: 100%;
  height: auto;
}

/* Verschiedene Layouts für Orientierung */
@media (orientation: landscape) {
  .hero {
    min-height: 50vh;
  }
}

Übungsaufgaben

Einfach: Erstelle eine Seite mit max-width: 960px; margin: 0 auto für den Hauptinhalt. Füge eine Media Query für max-width: 600px hinzu, die die Schriftgröße des body auf 14px reduziert.
Mittel: Baue ein Zwei-Spalten-Layout (Sidebar links, Inhalt rechts). Auf Bildschirmen unter 768px soll es auf eine Spalte wechseln. Nutze CSS Grid und eine Media Query.
Schwer: Erstelle eine vollständig responsive Seite mit dem Mobile-First-Ansatz: Beginne mit einem einspaltigem Layout für Mobilgeräte und füge schrittweise Media Queries für Tablet (600px) und Desktop (1024px) hinzu. Nutze clamp() für die Schriftgröße der Hauptüberschrift.

Weiterführende Informationen: W3Schools – Responsive Design

Kapitel 10: Übergänge & Animationen

Animationen und Übergänge machen Webseiten lebendig und verbessern das Nutzererlebnis. Statt abrupter Zustandswechsel fließen Änderungen sanft ineinander über. CSS bietet dafür zwei Hauptwerkzeuge: transition für einfache Zustandswechsel (z.B. beim Hover) und @keyframes mit animation für komplexe, automatisch ablaufende Animationen.

transition – sanfte Übergänge:
Die transition-Eigenschaft nimmt bis zu vier Werte: Eigenschaft (was sich ändern soll), Dauer (wie lange), Timing-Funktion (wie der Verlauf aussieht) und Verzögerung (nach wie viel Zeit es beginnt). ease beginnt langsam, beschleunigt und bremst wieder ab. linear ist gleichmäßig. ease-in beginnt langsam, ease-out bremst am Ende.

transform – Elemente verformen:
transform verändert ein Element visuell, ohne das Layout der umliegenden Elemente zu beeinflussen. scale(1.1) vergrößert auf 110%. rotate(45deg) dreht um 45 Grad. translate(x, y) verschiebt das Element. transform wird sehr oft mit transition kombiniert, um flüssige Hover-Effekte zu erzeugen.

@keyframes und animation:
Mit @keyframes definierst du eine Animation als Abfolge von Zuständen. Du vergibst der Animation einen Namen und beschreibst den Anfang (from oder 0%) und das Ende (to oder 100%) – oder beliebig viele Zwischenzustände. Mit animation wendest du die Animation auf ein Element an und steuerst Dauer, Wiederholungen und Richtung.

Tipp: Animiere nur GPU-freundliche Eigenschaften:
Browser können transform und opacity besonders effizient animieren, weil dafür die Grafikkarte genutzt werden kann. Animiere möglichst keine width, height, margin oder padding – das ist rechenintensiv und kann ruckeln.

/* Einfacher Hover-Übergang */
.button {
  background-color: #3182ce;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 200ms ease, transform 150ms ease;
}

.button:hover {
  background-color: #2b6cb0;
  transform: translateY(-2px); /* leicht nach oben schieben */
}

/* Karte mit mehreren Übergängen */
.card {
  transition: box-shadow 250ms ease, transform 250ms ease;
}

.card:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Keyframe-Animation: Einblenden */
@keyframes einblenden {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-text {
  animation: einblenden 600ms ease forwards;
}

/* Dauerhaftes Pulsieren */
@keyframes pulsieren {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}

.badge {
  animation: pulsieren 2s ease-in-out infinite;
}

/* Rotation */
@keyframes drehen {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.spinner {
  animation: drehen 1s linear infinite;
}

Übungsaufgaben

Einfach: Erstelle einen Button, der beim Hover seine Hintergrundfarbe mit einem transition von 300ms ändert. Füge auch eine transform: scale(1.05) beim Hover hinzu.
Mittel: Baue eine Karte, die beim Hover nach oben gleitet (translateY(-4px)) und einen stärkeren Schatten bekommt. Nutze transition für beide Eigenschaften.
Schwer: Erstelle eine Ladeanzeige: ein Kreis, der sich dauerhaft dreht (@keyframes rotate). Nutze border mit einem transparenten und einem farbigen Rand, um einen Spinner-Effekt zu erzeugen. Die Animation soll unendlich laufen.

Weiterführende Informationen: W3Schools – CSS Transitions & Animations

Kapitel 11: CSS-Variablen & Custom Properties

CSS-Variablen (auch Custom Properties genannt) erlauben es dir, Werte einmal zu definieren und überall wiederzuverwenden. Das macht dein CSS wartbarer, konsistenter und leichter zu ändern. Wenn du einen Farbwert an 20 Stellen benutzt und ihn ändern möchtest, änderst du mit CSS-Variablen nur eine Zeile.

Syntax:
Eine CSS-Variable wird mit zwei Bindestrichen deklariert: --meine-variable: wert; Mit var(--meine-variable) nutzt du sie. Üblicherweise deklariert man globale Variablen im :root-Selektor, der das höchste Element der Seite trifft. So sind die Variablen überall auf der Seite verfügbar.

Variablen sind kaskadierend:
Du kannst eine Variable auf einem Kindelement überschreiben – dann gilt nur in diesem Element und seinen Kindern der neue Wert. Das ermöglicht mächtige Patterns wie Themenvarianten: Du gibst dem Container einer Karte einen anderen Wert für eine Farb-Variable, und alle Elemente darin reagieren automatisch.

Dark Mode mit CSS-Variablen:
Dark Mode lässt sich elegant mit CSS-Variablen und der Media Query prefers-color-scheme: dark umsetzen. Du definierst Farb-Variablen für den hellen Modus in :root und überschreibst sie im Dark-Mode-Query. Der gesamte Rest deines CSS bleibt unverändert – nur die Variablen-Werte wechseln.

Fallback-Werte:
var(--meine-farbe, #3182ce) – der zweite Parameter ist ein Fallback-Wert, der verwendet wird, wenn die Variable nicht definiert ist. Das macht deinen Code robuster.

/* Variablen global definieren */
:root {
  --farbe-primaer:  #3182ce;
  --farbe-text:     #2d3748;
  --farbe-bg:       #f7fafc;
  --abstand-s:      0.5rem;
  --abstand-m:      1rem;
  --abstand-l:      2rem;
  --radius:         8px;
  --schatten:       0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Variablen verwenden */
body {
  background-color: var(--farbe-bg);
  color: var(--farbe-text);
}

.button {
  background-color: var(--farbe-primaer);
  padding: var(--abstand-s) var(--abstand-m);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

/* Dark Mode mit CSS-Variablen */
:root {
  --farbe-bg:   #ffffff;
  --farbe-text: #1a202c;
  --farbe-card: #f7fafc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --farbe-bg:   #1a202c;
    --farbe-text: #f7fafc;
    --farbe-card: #2d3748;
  }
}

/* Kein einziges Element muss geändert werden –
   alle nutzen die Variablen und reagieren automatisch! */
body      { background: var(--farbe-bg); color: var(--farbe-text); }
.card     { background: var(--farbe-card); }

/* Lokale Variable (überschreibt die globale nur für diese Komponente) */
.danger-card {
  --farbe-primaer: #e53e3e; /* nur hier rot */
  border-color: var(--farbe-primaer);
  color: var(--farbe-primaer);
}

Übungsaufgaben

Einfach: Definiere in :root drei Farb-Variablen (primär, sekundär, Hintergrund) und drei Abstand-Variablen (klein, mittel, groß). Nutze alle sechs in deinem CSS.
Mittel: Baue zwei Karten – eine normale und eine „Danger"-Variante. Nutze eine Variable --akzent-farbe, die bei der Danger-Karte lokal auf Rot überschrieben wird. Alle inneren Elemente sollen automatisch die neue Farbe übernehmen.
Schwer: Implementiere einen Dark Mode: Definiere alle Farben als Variablen in :root. Überschreibe sie in @media (prefers-color-scheme: dark). Teste das Ergebnis, indem du in den Systemeinstellungen deines Computers zwischen Hell- und Dunkelmodus wechselst.

Weiterführende Informationen: W3Schools – CSS Variablen

Kapitel 12: Mini-Projekt – Navigationsleiste & Kartendesign

In diesem abschließenden Kapitel bringst du alles zusammen. Du baust zwei vollständige Praxisbeispiele: eine responsive Navigationsleiste mit Flexbox und ein responsives Karten-Grid mit CSS Grid. Diese Komponenten kommen auf fast jeder echten Webseite vor – du baust sie hier von Grund auf selbst.

Navigationsleiste mit Flexbox:
Eine professionelle Navbar besteht typischerweise aus einem Logo links, Links in der Mitte oder rechts, und oft einem Button ganz rechts. Flexbox mit justify-content: space-between und align-items: center macht die Anordnung trivial. Hover-Effekte per transition machen die Navigation lebendig. Auf Mobilgeräten kann die Navigation auf eine vertikale Spalte (flex-direction: column) wechseln.

Karten-Grid mit CSS Grid:
Karten sind das am häufigsten eingesetzte UI-Pattern im Web. Jede Karte hat typischerweise ein Bild oben, einen Titel, einen Beschreibungstext und einen Button. Das Grid sorgt für die gleichmäßige Anordnung, Flexbox innerhalb der Karte für das vertikale Layout des Karten-Inhalts. flex-direction: column und margin-top: auto auf dem Button sorgen dafür, dass der Button immer unten klebt – egal wie lang der Text ist.

CSS-Variablen für Konsistenz:
Nutze im Mini-Projekt CSS-Variablen für alle Farben, Abstände und Radien. So kannst du das gesamte Design mit wenigen Änderungen in :root anpassen.

Was du danach kannst:
Nach diesem Projekt hast du die Grundlagen von CSS wirklich verstanden. Als nächste Schritte empfehlen sich: ein CSS-Framework wie Tailwind CSS kennenlernen, SCSS (eine mächtigere Erweiterung von CSS) erkunden oder direkt eigene Projekte mit HTML, CSS und JavaScript bauen. Du hast die Basis – jetzt kommt das Üben und Ausprobieren!

/* ============================================
   NAVIGATIONSLEISTE
   ============================================ */

:root {
  --nav-bg:       #1a202c;
  --nav-text:     #f7fafc;
  --nav-accent:   #63b3ed;
  --nav-hover-bg: rgba(255, 255, 255, 0.08);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  height: 64px;
  background-color: var(--nav-bg);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar__logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--nav-text);
  text-decoration: none;
}

.navbar__links {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar__links a {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--nav-text);
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 200ms ease, color 200ms ease;
}

.navbar__links a:hover {
  background-color: var(--nav-hover-bg);
  color: var(--nav-accent);
}

.navbar__cta {
  background-color: var(--nav-accent);
  color: #1a202c;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 150ms ease, opacity 150ms ease;
}

.navbar__cta:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

/* Responsive: Navbar auf Mobilgeräten */
@media (max-width: 600px) {
  .navbar {
    flex-direction: column;
    height: auto;
    padding: 1rem;
    gap: 0.75rem;
  }

  .navbar__links {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ============================================
   KARTEN-GRID
   ============================================ */

:root {
  --card-bg:      #ffffff;
  --card-border:  #e2e8f0;
  --card-radius:  12px;
  --card-shadow:  0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Grid-Container */
.cards-section {
  padding: 3rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

/* Einzelne Karte */
.card {
  display: flex;
  flex-direction: column;  /* Inhalt vertikal stapeln */
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.card__image {
  width: 100%;
  height: 180px;
  object-fit: cover;  /* Bild immer ausschneiden, nicht zerren */
}

.card__body {
  padding: 1.25rem;
  flex-grow: 1;  /* Body wächst, um den Button nach unten zu drücken */
  display: flex;
  flex-direction: column;
}

.card__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: #1a202c;
}

.card__text {
  color: #718096;
  font-size: 0.95rem;
  line-height: 1.6;
  flex-grow: 1;  /* Text wächst, Button bleibt unten */
}

.card__button {
  display: inline-block;
  margin-top: 1rem;  /* Abstand zum Text */
  padding: 0.6rem 1.25rem;
  background-color: #3182ce;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  transition: background-color 200ms ease;
}

.card__button:hover {
  background-color: #2b6cb0;
}

Übungsaufgaben

Einfach: Kopiere den Navbar-Code und passe die Farben mit CSS-Variablen an dein persönliches Farbschema an. Füge deinen Namen als Logo ein und drei Links deiner Wahl.
Mittel: Erstelle das Karten-Grid mit mindestens 6 Karten. Jede Karte soll ein Bild (du kannst background-color statt eines echten Bildes nutzen), einen Titel, einen Text und einen Button haben. Der Button soll immer unten kleben.
Schwer: Kombiniere Navbar und Karten-Grid zu einer vollständigen Seite. Füge eine Kopfzeile mit einem Titel und einem Untertitel zwischen Navbar und Grid ein. Mache die gesamte Seite responsive (Mobile First). Implementiere einen einfachen Dark Mode mit CSS-Variablen und prefers-color-scheme.

Weiterführende Informationen: W3Schools – CSS Referenz

Wichtige CSS-Eigenschaften

Die häufigsten Eigenschaften auf einen Blick – als schnelle Referenz zum Nachschlagen.

color

Textfarbe eines Elements setzen.

p {
  color: #2d3748;
}

background-color

Hintergrundfarbe eines Elements setzen.

.card {
  background-color: #ebf4ff;
}

font-size

Schriftgröße festlegen – bevorzugt in rem.

h1 { font-size: 2rem; }
p  { font-size: 1rem; }

margin / padding

Außen- und Innenabstand steuern.

.box {
  margin: 1rem auto;
  padding: 1.5rem 2rem;
}

border

Rahmen um ein Element zeichnen.

.card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

display: flex

Flexbox aktivieren für eindimensionale Layouts.

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

display: grid

CSS Grid für zweidimensionale Raster-Layouts.

.grid {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
}

position

Positionierung aus dem normalen Fluss nehmen.

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

@media

Responsive CSS für verschiedene Bildschirmgrößen.

@media (min-width: 768px) {
  .grid {
    grid-template-columns:
      repeat(2, 1fr);
  }
}

transition

Sanfte Übergänge bei Zustandsänderungen.

.btn {
  transition:
    background 200ms ease,
    transform 150ms ease;
}

transform

Elemente skalieren, drehen oder verschieben.

.card:hover {
  transform:
    translateY(-4px)
    scale(1.02);
}

:hover

Stile anwenden, wenn die Maus darüber schwebt.

a:hover {
  color: #3182ce;
  text-decoration: underline;
}

Tipps zum Lernen

CSS lernst du am besten, indem du es machst. Hier sind einige bewährte Strategien, die dir helfen, schneller voranzukommen:

Entwicklertools nutzen (F12): Klicke auf ein beliebiges Element und sieh dir seinen CSS-Code live im Browser an. Du kannst Werte direkt dort ändern und das Ergebnis sofort sehen – ohne Datei zu speichern.
Kleine Projekte bauen: Eine Profilseite, eine Rezeptseite, eine Visitenkarte – baue etwas Reales, das dir wichtig ist. Konkrete Ziele motivieren weit mehr als abstrakte Übungen.
Codebeispiele abtippen statt kopieren: Das klingt altmodisch, aber händisches Tippen aktiviert das Gehirn stärker. Du merkst Tippfehler und verstehst den Code besser.
CSS-Spielplätze nutzen: CodePen (codepen.io) und JSFiddle (jsfiddle.net) ermöglichen dir, CSS ohne lokale Setup zu experimentieren und mit anderen zu teilen.
Box-sizing global setzen: Füge * { box-sizing: border-box; } ganz an den Anfang jeder CSS-Datei – das erspart dir viele Layout-Überraschungen.
Mobile zuerst testen: Klemme das Browserfenster auf 375px Breite zusammen und sieh, ob deine Seite noch lesbar ist. So merkst du früh, wenn etwas nicht stimmt.
MDN Web Docs als Nachschlagewerk: Die Mozilla Developer Network Dokumentation (developer.mozilla.org) ist die verlässlichste CSS-Referenz – besser als jedes andere Tutorial.
Fehler aktiv suchen: Wenn etwas nicht wie erwartet aussieht, öffne die Entwicklertools und prüfe, welche CSS-Regeln gewinnen und ob eine Eigenschaft durchgestrichen ist (wurde überschrieben).