CSS Grundlagen

Was ist CSS?

CSS (Cascading Style Sheets) ist die Sprache für das Design deiner Webseite. Während HTML die Struktur und den Inhalt definiert, bestimmt CSS das Aussehen: Farben, Schriften, Abstände, Layouts und Animationen.

Der Name "Cascading" (kaskadierend) beschreibt, wie CSS-Regeln von oben nach unten fließen und sich gegenseitig überschreiben können - ein Konzept, das wir am Ende dieses Tutorials bei der Spezifität genauer betrachten.

Formatierungsregeln

Ein CSS-Stylesheet enthält alle Regeln, die bestimmen, wie eine Webseite und ihre einzelnen Elemente dargestellt werden. Jede Regel besteht aus zwei Teilen: Selektor und Deklarationsblock.

Der Selektor legt fest, auf welche Elemente sich die Formatierung bezieht. Der Deklarationsblock steht in geschweiften Klammern und enthält ein oder mehrere Eigenschaft-Wert-Paare, die das Aussehen dieser Elemente definieren.

Ein Selektor kann zum Beispiel einfach der Name eines HTML-Elements sein - dann wirkt die Regel auf alle Elemente dieses Typs.

Beispiel für eine CSS-Regel für eine h1-Überschrift

h1 {
    color: teal;
    margin-bottom: 20px;
}

Selektoren

Element-Selektoren

Seit HTML5 kannst du die HTML-Struktur-Elemente <header>, <main>, <footer>, <nav>, <section>, <article> usw. direkt ansprechen, ohne Punkt - weil sie echte Tags sind, keine Klassen.

CSS Kopieren

/* 3. HTML5-Struktur-Elemente */

header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
}

main {
    padding: 60px 0;
}

footer {
    background-color: #222;
    color: #ccc;
    padding: 40px 0;
    text-align: center;
}

<p class="highlight">Wichtiger Hinweis</p>

.highlight {
    background-color: yellow;
    padding: 0.5rem;
}

/* 4. Allgemeine, wiederverwendbare Klassen */

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.bg-light { background-color: #f6f8f6; }
.bg-dark  { background-color: #333; color: #fff; }

.text-center { text-align: center; }
.mt-2 { margin-top: 20px; }
.pt-4 { padding-top: 40px; }

<section id="hero">
    Willkommen auf meiner Seite
</section>

#hero {
    text-align: center;
    padding: 2rem;
}

Pseudoklassen z. B. :hover, :focus, :first-child

Pseudoklassen greifen auf dynamische Zustände oder spezielle Positionen zu.

button:hover {
    opacity: 0.8;
}

input:focus {
    border-color: dodgerblue;
}

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

Kombinierte Selektoren & Kombinatoren

Du kannst Selektoren kombinieren, um Elemente präziser anzusprechen. Dabei gibt es zwei Ansätze: mehrere Selektoren verketten oder Beziehungen zwischen Elementen nutzen.

Mehrere Selektoren verketten

Ohne Leerzeichen verbunden bedeutet: Element muss alle Bedingungen erfüllen.

CSS Kopieren

/* Element mit bestimmter Klasse */
p.intro {
    font-size: 1.2rem;
}
/* Nur <p> mit class="intro", nicht <div class="intro"> */

/* Element mit mehreren Klassen */
.btn.primary {
    background: blue;
}
/* Nur Elemente mit BEIDEN Klassen: class="btn primary" */

/* Element mit ID */
div#hero {
    min-height: 100vh;
}

/* Kombination aus allem */
input.form-control:focus {
    border-color: blue;
}

Selektorlisten - mehrere Elemente gleich stylen

Mit Komma getrennt: Die Regel gilt für alle aufgelisteten Selektoren.

CSS Kopieren

/* Alle Überschriften */
h1, h2, h3, h4 {
    font-family: "Montserrat", sans-serif;
    line-height: 1.2;
}

/* Verschiedene Elemente */
button, .btn, input[type="submit"] {
    cursor: pointer;
}

Nachfahren-Selektor - ␣ Leerzeichen

HTML + CSS Kopieren

<nav>
    <ul>
        <li><a href="#">Link 1</a></li>  <!-- ✓ wird gestylt -->
        <li><a href="#">Link 2</a></li>  <!-- ✓ wird gestylt -->
    </ul>
</nav>

/* Alle <a> innerhalb von <nav>, egal wie tief */
nav a {
    color: white;
    text-decoration: none;
}

Kind-Selektor >

HTML + CSS Kopieren

<ul class="menu">
    <li>Punkt 1</li>           <!-- ✓ direktes Kind -->
    <li>Punkt 2
        <ul>
            <li>Unterpunkt</li>  <!-- ✗ kein direktes Kind von .menu -->
        </ul>
    </li>
</ul>

/* Nur direkte <li>-Kinder von .menu */
.menu > li {
    border-bottom: 1px solid #ccc;
}

Direkter Nachbar +

HTML + CSS Kopieren

<h2>Überschrift</h2>
<p>Erster Absatz</p>   <!-- ✓ direkt nach h2 -->
<p>Zweiter Absatz</p>  <!-- ✗ nicht direkt nach h2 -->

/* Nur der erste Absatz direkt nach einer h2 */
h2 + p {
    font-size: 1.1rem;
    color: #666;
}

Allgemeiner Nachbar ~

HTML + CSS Kopieren

<h2>Überschrift</h2>
<p>Absatz 1</p>  <!-- ✓ -->
<p>Absatz 2</p>  <!-- ✓ -->
<p>Absatz 3</p>  <!-- ✓ -->

/* ALLE Absätze, die nach einer h2 kommen */
h2 ~ p {
    margin-left: 1rem;
}

Praxis-Tipp

Der Nachfahren-Selektor (Leerzeichen) ist am häufigsten. Der Kind-Selektor (>) ist nützlich bei verschachtelten Menüs. Die Geschwister-Selektoren (+ und ~) sind praktisch für Abstände nach Überschriften oder Checkbox-Hacks ohne JavaScript.

Spezifität - Welche Regel gewinnt?

Wenn mehrere CSS-Regeln auf dasselbe Element zutreffen, entscheidet die Spezifität, welche Regel angewendet wird. Je spezifischer ein Selektor, desto höher seine Priorität.

Spezifität berechnen

Spezifität wird oft als Zahlenreihe dargestellt: (Inline, IDs, Klassen, Elemente)

Hierarchie (von schwach zu stark)

1. Element-Selektoren: p, div, header
2. Klassen, Attribute, Pseudoklassen: .btn, [type="text"], :hover
3. IDs: #hero, #navigation
4. Inline-Styles: style="color: red;"
5. !important: Überschreibt alles (vermeiden!)

Beispiel: Wer gewinnt?

HTML + CSS Kopieren

<p id="intro" class="highlight">Dieser Text ist...</p>

p { color: black; }              /* (0,0,0,1) */
.highlight { color: yellow; }    /* (0,0,1,0) */
#intro { color: blue; }          /* (0,1,0,0) ✓ Gewinner! */
p.highlight { color: green; }    /* (0,0,1,1) */

Der Text ist blau, weil #intro die höchste Spezifität hat.

Bei gleicher Spezifität

Wenn zwei Regeln die gleiche Spezifität haben, gewinnt die später definierte:

CSS Kopieren

.btn { background: blue; }   /* Erste Regel */
.btn { background: green; }  /* ✓ Gewinnt (später definiert) */

Vermeide !important

!important überschreibt alle anderen Regeln - aber es führt schnell zu Wartungsproblemen. Wenn du es brauchst, ist das meist ein Zeichen für schlecht strukturiertes CSS. Besser: Spezifischere Selektoren verwenden.

CSS Kopieren

/* ✗ Vermeiden */
.btn { background: red !important; }

/* ✓ Besser: Spezifischer Selektor */
.header .btn { background: red; }

Zusammenfassung