Was ist CSS?

CSS steht fuer Cascading Style Sheets und ist die Sprache, mit der du Webseiten gestaltest. Waehrend HTML die Struktur definiert, kuemmert sich CSS um alles Visuelle: Farben, Schriften, Layouts, Animationen und vieles mehr.

HTML ohne CSS vs. mit CSS

Stell dir vor, du hast dieses HTML:

<h1>Willkommen</h1>
<p>Das ist meine Webseite.</p>
<button>Mehr erfahren</button>

Ohne CSS sieht das aus wie ein langweiliges Textdokument aus den 90er Jahren. Mit CSS wird daraus eine moderne, ansprechende Webseite:

h1 {
    font-size: 3rem;
    color: #1a1a2e;
    font-weight: 800;
}

p {
    color: #4a5568;
    font-size: 1.2rem;
    line-height: 1.8;
}

button {
    background: #e44d26;
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
}

Wie funktioniert CSS?

CSS besteht aus Regeln. Jede Regel hat einen Selektor und Deklarationen:

selektor {
    eigenschaft: wert;
    eigenschaft: wert;
}

Ein konkretes Beispiel

h1 {
    color: #e44d26;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

Selektor: h1 — waehlt alle <h1>-Elemente aus
Eigenschaft: color — die Textfarbe
Wert: #e44d26 — ein bestimmtes Orange

Die drei Wege, CSS einzubinden

1. Inline CSS (direkt am Element)

<p style="color: red; font-size: 18px;">Roter Text</p>

Nachteil: Schwer wartbar, keine Wiederverwendung.

2. Internal CSS (im Head-Bereich)

<head>
    <style>
        p {
            color: red;
            font-size: 18px;
        }
    </style>
</head>

Vorteil: Alles in einer Datei. Nachteil: Gilt nur fuer diese eine Seite.

3. External CSS (eigene Datei) — empfohlen!

<!-- In der HTML-Datei -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

/* In style.css */
p {
    color: red;
    font-size: 18px;
}

Vorteile:

Eine CSS-Datei fuer mehrere HTML-Seiten
Saubere Trennung von Inhalt und Design
Browser kann CSS-Datei cachen (schnelleres Laden)

Vergleich der drei Methoden

Methode	Wiederverwendbar	Wartbar	Caching	Empfehlung
Inline	Nein	Schlecht	Nein	Vermeiden
Internal	Nein	Mittel	Nein	Fuer Prototypen
External	Ja	Gut	Ja	Standard!

Das “Cascading” in CSS

Das “C” in CSS steht fuer Cascading (kaskadierend). Das bedeutet: Wenn mehrere CSS-Regeln auf dasselbe Element zutreffen, gibt es eine Rangordnung:

/* Regel 1: Alle Absaetze blau */
p {
    color: blue;
}

/* Regel 2: Absaetze mit Klasse "highlight" rot */
p.highlight {
    color: red;
}

/* Regel 3: Inline-Style hat Vorrang */
/* <p style="color: green;">Text</p> */

Die Rangfolge (von niedrig nach hoch):

Browser-Standardstyle
Externe/Interne CSS-Regeln
Spezifischere Selektoren (Klassen > Tags)
Inline-Styles
!important (vermeiden!)

CSS-Kommentare

/* Das ist ein einzeiliger Kommentar */

/*
   Das ist ein
   mehrzeiliger Kommentar
*/

h1 {
    color: blue; /* Farbe der Hauptueberschrift */
}

Erste Schritte: Eine Seite stylen

Erstelle zwei Dateien:

index.html:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS lernen</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Mein CSS-Experiment</h1>
        <p>Hier lerne ich CSS!</p>
    </header>

    <main>
        <section>
            <h2>Was ist CSS?</h2>
            <p>CSS macht Webseiten schoen. Es ist die
               Designsprache des Webs.</p>
        </section>

        <section>
            <h2>Warum CSS lernen?</h2>
            <ul>
                <li>Webseiten gestalten</li>
                <li>Layouts erstellen</li>
                <li>Animationen bauen</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 CSS Learner</p>
    </footer>
</body>
</html>

style.css:

/* Grundeinstellungen */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

/* Header */
header {
    text-align: center;
    padding: 2rem 0;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 2rem;
}

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

h2 {
    color: #264de4;
    margin: 1.5rem 0 0.5rem;
}

/* Inhalt */
section {
    margin-bottom: 2rem;
}

ul {
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.5rem;
}

/* Footer */
footer {
    border-top: 2px solid #e2e8f0;
    padding-top: 1rem;
    margin-top: 2rem;
    text-align: center;
    color: #999;
}

Wichtige CSS-Einheiten

Einheit	Beschreibung	Beispiel
`px`	Pixel (fest)	`font-size: 16px`
`rem`	Relativ zur Root-Schriftgroesse	`font-size: 1.5rem`
`em`	Relativ zur Eltern-Schriftgroesse	`padding: 1.5em`
`%`	Prozent des Elternelements	`width: 50%`
`vw` / `vh`	Prozent des Viewports	`height: 100vh`

Empfehlung: Verwende rem fuer Schriftgroessen und px oder rem fuer Abstaende.

Uebungen

Uebung 1: Externe CSS-Datei

Erstelle eine HTML-Datei und eine separate CSS-Datei. Verlinke sie und style:

Die Hintergrundfarbe des <body>
Die Schriftart und -groesse
Die Farbe der Ueberschriften

Uebung 2: Drei Methoden vergleichen

Erstelle drei identische Absaetze und style jeden mit einer anderen Methode (Inline, Internal, External). Beobachte, welche Methode gewinnt, wenn sich die Regeln widersprechen.

Was kommt als Naechstes?

Im naechsten Kapitel lernst du CSS-Selektoren — das Herzschlag von CSS:

Element-, Klassen- und ID-Selektoren
Kombinator-Selektoren
Pseudo-Klassen und Pseudo-Elemente

Zusammenfassung

CSS steht fuer Cascading Style Sheets und gestaltet das Aussehen von Webseiten
CSS besteht aus Selektoren und Deklarationen (Eigenschaft: Wert)
Es gibt drei Wege CSS einzubinden: Inline, Internal und External (empfohlen)
Das Kaskadenprinzip bestimmt, welche Regel gewinnt bei Konflikten
External CSS in eigenen Dateien ist der Standard in der Praxis

Pro-Tipp: Starte jedes CSS-Projekt mit einem einfachen Reset: * { margin: 0; padding: 0; box-sizing: border-box; }. Das entfernt die unterschiedlichen Browser-Standardstyles und gibt dir eine saubere Ausgangsbasis!