CSS-Syntax, Selektoren und Kommentare

In dieser Lektion werden die formale Struktur von CSS, die grundlegenden Selektortypen sowie Kommentare behandelt. Diese Konzepte bilden das Fundament jeder CSS-Regel.

1. Grundaufbau einer CSS-Regel

Definition.
Eine CSS-Regel beschreibt, wie bestimmte HTML-Elemente dargestellt werden.

Eine Regel besteht aus zwei Hauptteilen:

Allgemeine Syntax: 
selektor {
    eigenschaft: wert;
    eigenschaft: wert;
}
Jede Deklaration endet mit einem Semikolon.

2. Eigenschaften und Werte

Eine Eigenschaft beschreibt ein Darstellungsmerkmal, der Wert legt dessen konkrete Ausprägung fest. 
p {
    color: blue;
    font-size: 16px;
}

CSS kennt hunderte Eigenschaften, die logisch gruppiert sind (z.B. Text, Box-Modell, Layout, Farben).

3. Elementselektoren

Ein Elementselektor wählt alle HTML-Elemente eines bestimmten Typs aus. 
h1 {
    color: darkred;
}

p {
    line-height: 1.6;
}
Elementselektoren wirken global auf alle entsprechenden Tags.

4. Klassenselektoren

Klassenselektoren wählen Elemente anhand ihres class-Attributs aus.
HTML: 
<p class="highlight">Text</p>
CSS: 
.highlight {
    background-color: yellow;
}

Klassen sind wiederverwendbar und das wichtigste Stilmittel in CSS.

5. ID-Selektoren

Ein ID-Selektor wählt genau ein Element über dessen eindeutige ID aus. 
#header {
    background-color: #333;
    color: white;
}
IDs dürfen pro Seite nur einmal verwendet werden.

6. Gruppierung von Selektoren

Mehrere Selektoren können dieselben Regeln teilen. 
h1, h2, h3 {
    font-family: Arial, sans-serif;
}

Dies reduziert Code-Duplizierung und erhöht Wartbarkeit.

7. Kommentare in CSS

Kommentare dienen der Dokumentation und werden vom Browser ignoriert. 
/* Dies ist ein CSS-Kommentar */
p {
    color: black; /* Textfarbe */
}
CSS kennt nur Block-Kommentare, keine Zeilenkommentare.

8. Lesbarkeit und Stilregeln

Gut strukturierter CSS-Code ist entscheidend für größere Projekte. 
.main-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
}

9. Zusammenfassung

Eine saubere CSS-Syntax ist Voraussetzung für jedes weitere Thema.