CSS für Einsteiger

Kompletter Kurs (Kapitel 1–10)

Kapitel 1: Was ist CSS?

CSS steht für Cascading Style Sheets und ist die Sprache zur Gestaltung von Webseiten.

Während HTML für die Struktur und den Inhalt einer Webseite verantwortlich ist, wird mit CSS das Aussehen bestimmt. Dazu gehören Farben, Schriftarten, Abstände und das Layout.

Warum CSS?

Ein einfaches Beispiel:

HTML-Code:

<p>Dies ist ein Absatz.</p>

CSS-Code:

p {
    color: blue;
    font-size: 18px;
}

Kapitel 2: Der CSS-Editor und erste Datei

Zum Schreiben von CSS kannst du denselben Texteditor verwenden wie für HTML:

Wie bindet man CSS ein?

Es gibt drei Möglichkeiten:

  1. Inline-CSS: Direkt im HTML-Element (nur für ganz kurze Styles)
    2. <p style="color:blue;">Blauer Text</p>
  2. Internes CSS: Im <style>-Tag im <head> der HTML-Datei
    3. <style>
    p { color: blue; }
</style>
  3. Externes CSS: In einer separaten Datei (.css) – empfohlen
    4. <link rel="stylesheet" href="design.css">

Erste eigene CSS-Datei:

1️⃣ Erstelle eine Datei design.css
2️⃣ Schreibe hinein:

p {
    color: green;
    font-size: 18px;
}

Extra: Probier mal!

Aufgabe:

Erstelle eine HTML-Seite und binde eine externe CSS-Datei ein, die alle Absätze grün und 18px groß darstellt.

Lösung ansehen

Kapitel 3: Selektoren und Eigenschaften

Mit Selektoren bestimmst du, welche HTML-Elemente du gestalten möchtest. Die Eigenschaften legen fest, wie diese Elemente aussehen sollen.

Typische Selektoren:

Typische Eigenschaften:

Beispiel:

p {
    color: blue;
    font-size: 16px;
}

.wichtig {
    background-color: yellow;
}

#haupttitel {
    font-size: 24px;
    color: green;
}

Extra: Probier mal!

Aufgabe:

Erstelle eine HTML-Seite mit:

Gestalte die Elemente mit verschiedenen Farben und Schriftgrößen.

Lösung ansehen

Kapitel 4: Farben und Hintergründe

Mit CSS kannst du Texte und Hintergründe farblich gestalten. Farben lassen sich auf verschiedene Arten angeben.

Textfarbe

p {
    color: blue;
}

Hintergrundfarbe

div {
    background-color: lightgray;
}

Farbangaben:

Beispiel:

h1 {
    color: white;
    background-color: #333333;
}

Extra: Probier mal!

Aufgabe:

Erstelle eine HTML-Seite mit einem Absatz, dessen Textfarbe grün und dessen Hintergrundfarbe hellgrau ist.

Lösung ansehen

Kapitel 5: Textgestaltung

Mit CSS kannst du das Aussehen von Texten umfassend steuern. Dazu gehören Schriftarten, Größen, Farben und Ausrichtungen.

Wichtige Eigenschaften:

Beispiel:

p {
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-style: italic;
    font-weight: bold;
    text-align: center;
}

Extra: Probier mal!

Aufgabe:

Gestalte einen Absatz mit:

Lösung ansehen

Kapitel 6: Abstände und Rahmen

Mit CSS kannst du steuern, wie viel Platz um Elemente herum ist und ob sie einen Rahmen haben.

Abstandseigenschaften:

Rahmeneigenschaften:

Beispiel:

p {
    margin: 20px;
    padding: 10px;
    border: 2px solid black;
}

Grafik: Box-Modell (Merkregel)

margin → border → padding → Inhalt

Extra: Probier mal!

Aufgabe:

Gestalte einen Absatz mit:

Lösung ansehen

Kapitel 7: Box-Modell und erweiterte Beispiele

Das Box-Modell ist das grundlegende Konzept für das Layout in CSS. Jedes Element wird als Rechteck behandelt, das aus mehreren Bereichen besteht.

Bestandteile des Box-Modells:

Visualisierung (von innen nach außen):

Content → Padding → Border → Margin

Beispiel:

div {
    width: 200px;
    padding: 10px;
    border: 3px solid blue;
    margin: 20px;
    background-color: lightyellow;
}

Erklärung:

Das div hat eine feste Breite, innen 10px Platz (padding), einen blauen Rahmen und außen 20px Abstand (margin).

Extra: Probier mal!

Aufgabe:

Erstelle eine Box mit:

Lösung ansehen

Kapitel 8: Listen und Tabellen gestalten

Mit CSS kannst du auch Listen und Tabellen optisch anpassen.

Listen

Eigenschaft: list-style-type

Damit bestimmst du das Symbol (Aufzählungszeichen) von ungeordneten Listen:

ul {
    list-style-type: square;
}

Weitere Werte: disc (Standard), circle, none

Tabellen

Eigenschaften:

Beispiel:

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid black;
    padding: 8px;
}

Extra: Probier mal!

Aufgabe:

Gestalte:

Lösung ansehen

Kapitel 9: Positionierung und Display

Mit CSS kannst du steuern, wie Elemente auf der Seite angeordnet werden. Dazu nutzt du die Eigenschaften position und display.

Positionierung:

Beispiel:

#box {
    position: relative;
    left: 20px;
    top: 10px;
}

Display-Typen:

Beispiel:

nav {
    display: flex;
    justify-content: space-between;
}

Extra: Probier mal!

Aufgabe:

Erstelle ein div mit der ID box und positioniere es relativ. Gib ihm eine Hintergrundfarbe, 20px linke Verschiebung und 10px obere Verschiebung.

Lösung ansehen

Kapitel 10: Abschlusstest & Teilnahmebescheinigung

Herzlichen Glückwunsch! Du hast alle Kapitel abgeschlossen. Jetzt kannst du dein Wissen im Abschlusstest überprüfen und dir deine Teilnahmebescheinigung sichern.

Abschlusstest

Anhang: CSS Basics Cheatsheet

CSS-Einbindung

Selektoren

Textgestaltung

Abstände & Rahmen

Listen & Tabellen

Positionierung

Box-Modell

Content → Padding → Border → Margin

Weitere Kurse

Du möchtest noch mehr lernen? Hier findest du unsere weiteren Grundlagenkurse: