Web Grundlagen · CSS Grundlagen

← Zurück zu Web Grundlagen

CSS sorgt dafür, dass HTML nicht nur „da ist“, sondern auch lesbar, geordnet und schön wirkt. Während HTML die Struktur beschreibt, beschreibt CSS das Aussehen.

Merke

CSS ist ein „Regelwerk“: Wenn X, dann so aussehen

Du definierst Regeln (Selektoren), die auf bestimmte Elemente passen. Der Browser wendet diese Regeln an und rendert danach die Seite.

1) CSS einbinden: Inline, <style> oder Datei?

CSS kann auf drei Arten in eine Seite kommen. Für echte Projekte ist fast immer eine separate CSS-Datei die beste Wahl.

1.1 Inline (direkt am Element)

CSS steht direkt im HTML-Tag – geht schnell, ist aber schwer zu pflegen.

Inline-CSS

<p style="color: red; font-weight: bold;">
    Dieser Text ist rot und fett.
</p>

Achtung

Inline-CSS ist schnell, aber schlecht wartbar

Bei vielen Elementen wird es unübersichtlich. Du müsstest an vielen Stellen gleichzeitig ändern, wenn sich das Design ändern soll.

1.2 Im <style>-Block

CSS steht im HTML-Dokument – besser als Inline, aber immer noch pro Seite „eingebacken“.

<style>-Block

<head>
    <style>
        p {
            color: #e6e6e6;
            line-height: 1.5;
        }
    </style>
</head>

Tipp

Für Lernbeispiele oder schnelle Prototypen ist das praktisch. In größeren Projekten trennt man HTML und CSS aber fast immer.

1.3 Als separate Datei (empfohlen)

Das ist die Standard-Lösung: eine CSS-Datei, die auf vielen Seiten wiederverwendet wird.

CSS-Datei einbinden

<head>
    <link rel="stylesheet" href="/assets/css/styles.css">
</head>

Merke

Separate Dateien sind übersichtlich

Du trennst Struktur (HTML) und Design (CSS). Das macht es leichter zu pflegen und du kannst ein Design auf viele Seiten gleichzeitig anwenden.

2) Selektoren: Auf wen wirkt eine CSS-Regel?

Eine CSS-Regel besteht grob aus: Selektor + Eigenschaften. Der Selektor sagt, welche Elemente betroffen sind.

Regel-Aufbau

p {
    font-size: 16px;
    line-height: 1.5;
}

Drei sehr wichtige Selektor-Arten:

Tag: p { ... } → alle <p>
Klasse: .card { ... } → alle Elemente mit class="card"
ID: #header { ... } → genau ein Element mit id="header"

HTML + CSS (vereinfacht)

<div class="card">
    <h2>Titel</h2>
    <p>Text...</p>
</div>

/* CSS */
.card {
    padding: 12px;
    border: 1px solid #333;
    border-radius: 8px;
}

Achtung

IDs sparsam nutzen

Eine ID sollte nur einmal pro Seite vorkommen. Für wiederverwendbare Designs (Cards, Buttons, Layout) sind Klassen meist besser.

3) Das Box-Model (sehr wichtig)

Jedes HTML-Element ist für den Browser eine „Box“. Und diese Box hat typischerweise:

Content (der Inhalt)
Padding (Innenabstand)
Border (Rahmen)
Margin (Außenabstand)

Box-Model CSS

.box {
    padding: 12px;        /* innen */
    border: 2px solid #444;
    margin: 16px;         /* außen */
}

Tipp

Wenn Abstände „komisch“ sind: fast immer Margin/Padding

Viele Layout-Probleme entstehen, weil Elemente außen oder innen mehr Abstand haben als gedacht. Das Box-Model zu verstehen spart dir später sehr viel Zeit.

4) Flexbox (einfacher Einstieg ins Layout)

Flexbox ist eine moderne Möglichkeit, Elemente in Reihen oder Spalten anzuordnen. Für Einsteiger reicht es, die Grundidee zu kennen: Ein Container steuert, wie seine Kinder angeordnet werden.

Flexbox Beispiel

/* CSS */
.row {
    display: flex;
    gap: 12px;
}

.card {
    padding: 12px;
    border: 1px solid #333;
    border-radius: 10px;
}

Merke

Flexbox wirkt auf die direkten Kinder

display:flex setzt du auf den Container. Dann ordnet der Browser die direkten Elemente darin automatisch an.

Kleine Aufgaben (CSS)

Kurz nachdenken – dann Lösung einblenden.

Aufgabe 1 anzeigen

Was ist der Unterschied zwischen margin und padding?

Lösung einblenden

Lösung

Padding innen, Margin außen

padding ist der Abstand innerhalb des Elements (zwischen Inhalt und Rand). margin ist der Abstand außerhalb des Elements (zum nächsten Element).