CSS Syntax
CSS Syntax
Selektor, Eigenschaft, Wert, Deklaration, Regelblock und Kommentare. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.
Lernziele
- CSS-Regeln sicher lesen und schreiben
- Deklarationen und Regelblöcke unterscheiden
- Kommentare sinnvoll einsetzen
Erklärung
Eine CSS-Regel besteht aus einem Selektor und einem Regelblock. Im Regelblock stehen Deklarationen aus Eigenschaft und Wert. Jede Deklaration endet mit einem Semikolon.
CSS ignoriert unbekannte Eigenschaften oder ungültige Werte häufig still. Deshalb sind saubere Schreibweise und DevTools wichtig.
Beispiele
.notice {
padding: 1rem;
border: 1px solid #0ea5e9;
background: #e0f2fe;
}
.notice ist der Selektor, die geschweiften Klammern enthalten den Regelblock.
/* Statushinweis im Dashboard */
.status-ok {
color: #166534;
}
Kommentare sollten erklären, warum eine Regel existiert, nicht jeden offensichtlichen Wert wiederholen.
Typische Fehler
- Doppelpunkt oder Semikolon vergessen.
- Eigenschaften falsch schreiben, zum Beispiel
font-weigth. - Zu viele Kommentare für selbsterklärende Regeln.
Best Practices
- Schreibe pro Zeile eine Deklaration.
- Gruppiere zusammengehörige Regeln.
- Nutze Formatierung konsistent im ganzen Projekt.
Kleine Übung
Korrigiere fünf fehlerhafte CSS-Regeln mit fehlenden Semikolons, Tippfehlern und falsch gesetzten Klammern.
Zusammenfassung
CSS sollte Gestaltung systematisch lösen: klare Selektoren, wiederkehrende Werte, responsive Layouts und verständliche Zustände. Gute Stylesheets bleiben auch bei wachsenden Seiten wartbar.
Weiterführende Seiten
Zuletzt aktualisiert: 7. Juni 2026