Kapitel 3: Grundlegende CSS-Syntax

Willkommen zu Ihrem ersten echten CSS-Unterricht! Hier lernen Sie die "Grammatik" von CSS - wie man Regeln schreibt, die Browser verstehen können.

3.1 CSS-Syntaxstruktur: Selektor + Deklarationsblock

Jede CSS-Regel folgt einer einfachen Struktur. Stellen Sie sich das wie "Jemanden finden + Ihn anziehen" vor:

🔍 Die Analogie: "Jemanden finden und kleiden"

Stellen Sie sich vor, Sie sind ein Stylist bei einer Mode-Show:

1. Schritt 1: "Wen wollen Sie stylen?" (Das ist der Selektor - er wählt das HTML-Element aus)
2. Schritt 2: "Wie wollen Sie ihn kleiden?" (Das ist der Deklarationsblock - er enthält die Stile)

📝 Die tatsächliche Syntax

Hier ist, wie eine CSS-Regel aussieht:

selektor {
    eigenschaft1: wert1;  /* Deklaration 1 */
    eigenschaft2: wert2;  /* Deklaration 2 */
    eigenschaft3: wert3;  /* Deklaration 3 */
}

🎯 Beispiel: Eine Überschrift stylen

h1 {                      /* <-- Selektor (Wen?) */
    color: blau;          /* <-- Deklaration (Wie?) */
    font-size: 36px;      /* <-- Deklaration (Wie?) */
    text-align: center;    /* <-- Deklaration (Wie?) */
}                         /* <-- Geschweifte Klammer schließt den Block */

Erklärung:

• h1 = Selektor (Wählt alle <h1>-Elemente aus)
• {} = Deklarationsblock (Enthält alle Stile)
• color: blau; = Deklaration (Eigenschaft: Wert;)
• font-size: 36px; = Deklaration
• text-align: center; = Deklaration

3.2 Deklarationsblock-Regeln: Eigenschaft + Wert

Jede Zeile innerhalb der geschweiften Klammern ist eine Deklaration. Sie folgt immer demselben Muster:

📋 Das Format: Eigenschaft + Wert

eigenschaft: wert;

Wichtige Regeln:

1. Doppelpunkt (:) trennt Eigenschaft und Wert
2. Semikolon (;) beendet jede Deklaration (WICHTIG!)
3. Leerzeichen nach dem Doppelpunkt sind optional, aber empfohlen für Lesbarkeit

✅ Richtig vs. ❌ Falsch

Richtig ✅	Falsch ❌	Warum?
color: rot;	color rot;	Fehlender Doppelpunkt
font-size: 16px;	font-size: 16px	Fehlendes Semikolon
margin: 10px;	margin: 10 px;	Leerzeichen im Wert
padding: 5px 10px;	padding: 5px10px;	Fehlendes Leerzeichen zwischen Werten

🎨 Beispiel: Einen Absatz stylen

p {
    color: #333333;        /* Dunkelgrau */
    font-size: 16px;       /* Schriftgröße */
    line-height: 1.6;      /* Zeilenhöhe */
    margin-bottom: 15px;   /* Abstand nach unten */
    font-family: Arial, sans-serif;  /* Schriftart */
}

3.3 CSS-Kommentare (Code dokumentieren)

Kommentare sind Texte, die vom Browser ignoriert werden. Sie sind für Menschen gedacht!

📝 Einzeilige Kommentare

In CSS gibt es keine wirklichen "einzeiligen Kommentare". Stattdessen verwenden wir den mehrzeiligen Stil in einer einzigen Zeile:

/* Dies ist ein einzeiliger Kommentar */

h1 {
    color: blau; /* Dies ist auch ein Kommentar nach einer Regel */
}

📚 Mehrzeilige Kommentare

Verwenden Sie diese, um komplexe Logik oder lange Erklärungen zu dokumentieren:

/* 
 * Dies ist ein mehrzeiliger Kommentar
 * Er kann so viele Zeilen haben wie nötig
 * Nützlich für detaillierte Erklärungen
 */

/* Hauptüberschrift stylen */
h1 {
    color: #3366cc;
    font-size: 36px;
}

💡 Wann Sie Kommentare verwenden sollten:

1. Am Anfang der Datei: Informationen über die Datei

/* 
 * Datei: style.css
 * Autor: Ihr Name
 * Datum: 2024-01-01
 * Beschreibung: Hauptstylesheet für meine Webseite
 */

2. Vor wichtigen Abschnitten: Teilen Sie Ihre CSS-Datei in logische Abschnitte

/* ==================== */
/* HAUPTNAVIGATION */
/* ==================== */

nav {
    /* ... Stile ... */
}

3. Bei komplexen Regeln: Erklären Sie, warum Sie etwas so gemacht haben

.button {
    /* Verwenden Sie !important, um Konflikte mit Framework-Stilen zu vermeiden */
    color: weiß !important;
}

3.4 Wichtige Grundlagen: CSS-Codierungsstandards und Namenskonventionen

Guter, konsistenter Code ist genauso wichtig wie funktionierender Code!

📏 Einrückungs- und Formatierungsstandards

Empfohlenes Format:

/* Gut formatiert - lesbar */
selektor {
    eigenschaft1: wert1;
    eigenschaft2: wert2;
}

/* Schlecht formatiert - schwer zu lesen */
selektor {eigenschaft1: wert1; eigenschaft2: wert2;}

Regeln:

1. Einrückung: Verwenden Sie 2 oder 4 Leerzeichen pro Ebene (seien Sie konsistent!)
2. Zeilenumbrüche: Schreiben Sie jede Deklaration in eine neue Zeile
3. Leerzeichen: Fügen Sie nach dem Doppelpunkt und vor der öffnenden geschweiften Klammer ein Leerzeichen hinzu
4. Klammern: Die öffnende Klammer { steht in derselben Zeile wie der Selektor

🏷️ Namenskonventionen für Klassen und IDs

Wenn Sie Klassen (.meine-klasse) oder IDs (#meine-id) vergeben, befolgen Sie diese Regeln:

1. Verwenden Sie Bindestriche (-), keine Unterstriche (_)

/* Richtig */
.menu-item { }
.haupt-uberschrift { }

/* Falsch */
.menu_item { }
.haupt_uberschrift { }

2. Beschreibende Namen verwenden

/* Richtig - beschreibend */
.artikel-uberschrift { }
.navigations-leiste { }

/* Falsch - nicht beschreibend */
.klasse1 { }
.box { }

3. Kleinschreibung verwenden

/* Richtig */
.haupt-inhalt { }

/* Falsch */
.Haupt-Inhalt { }

4. Keine deutschen Umlaute oder Sonderzeichen

/* Richtig */
.haupt-navigation { }

/* Falsch */
.haupt-navigatiön { }
.meine#klasse { }

3.5 Übung: Textfarbe und -größe für eine HTML-Seite einstellen

Lassen Sie uns das Gelernte in der Praxis anwenden!

🎯 Aufgabe

Erstellen Sie eine HTML-Datei mit:

1. Einer Hauptüberschrift (<h1>)
2. Einem Absatz (<p>)
3. Einem Link (<a>)

Dann erstellen Sie eine CSS-Datei, um:

1. Die Überschrift blau und zentriert zu machen
2. Den Absatz dunkelgrau und 18px groß zu machen
3. Den Link grün zu machen und die Unterstreichung zu entfernen

📄 Los geht's!

Schritt 1: HTML-Datei (index.html) erstellen

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine Übungsseite</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Willkommen auf meiner Webseite</h1>
    
    <p>Dies ist ein Absatz mit etwas Text. Hier lernen wir CSS!</p>
    
    <a href="https://www.example.com">Besuchen Sie Example.com</a>
</body>
</html>

Schritt 2: CSS-Datei (style.css) erstellen

/* Alle h1-Elemente stylen */
h1 {
    color: #3366cc;        /* Blau */
    text-align: center;     /* Zentriert */
    font-size: 36px;        /* Große Schrift */
    margin-bottom: 20px;    /* Abstand nach unten */
}

/* Alle p-Elemente stylen */
p {
    color: #333333;        /* Dunkelgrau */
    font-size: 18px;       /* 18 Pixel groß */
    line-height: 1.6;      /* Zeilenabstand */
    margin-bottom: 15px;    /* Abstand nach unten */
}

/* Alle a-Elemente (Links) stylen */
a {
    color: #4CAF50;        /* Grün */
    text-decoration: none;  /* Unterstreichung entfernen */
    font-weight: bold;      /* Fettgedruckt */
}

/* Wenn man mit der Maus über den Link fährt */
a:hover {
    text-decoration: underline;  /* Unterstreichung hinzufügen */
    color: #45a049;             /* Dunkleres Grün */
}

🔍 Erklärung des Codes

1. h1 { }: Wählt alle <h1>-Elemente aus

   • color: #3366cc; = Setzt die Farbe auf Blau
   • text-align: center; = Zentriert den Text

2. p { }: Wählt alle <p>-Elemente aus

   • color: #333333; = Setzt die Farbe auf Dunkelgrau
   • font-size: 18px; = Setzt die Schriftgröße auf 18 Pixel

3. a { }: Wählt alle <a>-Elemente (Links) aus

   • color: #4CAF50; = Setzt die Farbe auf Grün
   • text-decoration: none; = Entfernt die Unterstreichung

4. a:hover { }: Wählt Links aus, wenn man mit der Maus darüber fährt

   • text-decoration: underline; = Fügt Unterstreichung hinzu

🚀 Ausführen

1. Speichern Sie beide Dateien im selben Ordner
2. Öffnen Sie index.html im Browser
3. Sie sollten eine gestaltete Seite sehen!

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Die CSS-Syntaxstruktur (Selektor + Deklarationsblock)
• ✅ Dass Deklarationen immer Eigenschaft: Wert; sein müssen
• ✅ Wie man Kommentare schreibt (/* Kommentar */)
• ✅ CSS-Codierungsstandards und Namenskonventionen
• ✅ Eine praktische Übung zur Textgestaltung

🎯 Nächste Schritte

Im nächsten Kapitel werden wir:

1. Verschiedene CSS-Einbindungsmethoden erlernen (Inline, Intern, Extern)
2. Den Kaskadierungsmechanismus verstehen (welcher Stil gewinnt, wenn es Konflikte gibt)
3. Praktische Projekte erstellen

Bereit für mehr? Los geht's! 🎨