Lädt...

CSS-Kommentare

Sie können bereits Regeln schreiben und ein Stylesheet einbinden. Manchmal wollen Sie sich aber eine Notiz an den Code heften – oder beim Testen einen Stil abschalten, ohne ihn zu löschen. Genau dafür gibt es CSS-Kommentare.

Was sind CSS-Kommentare?

Ein CSS-Kommentar ist eine Notiz zwischen /* und */. Der Browser überspringt sie beim Anwenden der Styles vollständig. Sie eignen sich für kurze Erinnerungen, für Abschnittsüberschriften im Stylesheet oder dazu, eine Regel beim Ausprobieren vorübergehend außer Kraft zu setzen.

So schreiben Sie einen Kommentar

Ein Kommentar sieht so aus: /* Ihre Notiz hier */. Alles zwischen dem öffnenden /* und dem schließenden */ ignoriert die CSS-Engine. Besucher sehen Kommentare nicht als Text auf der Seite – sie stehen nur im Quelltext des Stylesheets (und in den DevTools, sobald Sie die Datei öffnen).

Einzeiliger Kommentar

css
CSS Code 
/* Brand teal for the hero heading */
.hero {
color: #0f766e;
}

Warum kurze Notizen reichen

Ein einzeiliger Kommentar über einer Regel kann erklären, warum ein Wert dort steht – etwa wegen der Markenfarbe, eines provisorischen Fixes oder aus Gründen der Barrierefreiheit. Fassen Sie sich kurz: Schon in ein paar Wochen genügt Ihnen ein knapper Hinweis, um sich zu erinnern.

Mehrzeilige Kommentare

Kommentare dürfen sich über mehrere Zeilen erstrecken. Üblich ist ein kleines „Abschnittsbanner“ vor einer Gruppe zusammengehöriger Regeln, damit auch ein langes Stylesheet übersichtlich bleibt.

Mehrzeiliger Abschnittskommentar

css
CSS Code 
/*
Header styles
Keep logo and nav colors here
*/
.site-header {
background: #0f172a;
color: #f8fafc;
}

Halten Sie mehrzeilige Kommentare kurz. Wenn mitten im Stylesheet ganze Absätze Erklärtext stehen, ist die Datei schwerer zu lesen als ganz ohne Kommentare.

Eine Regel vorübergehend deaktivieren

Sie können eine einzelne Deklaration oder auch eine ganze Regel in einen Kommentar packen, um sie abzuschalten, ohne sie zu löschen. Später entfernen Sie einfach die Kommentarzeichen, und der Stil gilt wieder. Das hilft besonders bei der Fehlersuche, wenn Sie herausfinden wollen, welche Eigenschaft ein Layoutproblem verursacht.

Eine Deklaration auskommentieren

css
CSS Code 
.hero {
color: #0f766e;
/* font-size: 2rem; */
font-family: Georgia, serif;
}

Testen mit Methode

Kommentieren Sie immer nur das kleinste Stück aus, das Ihnen weiterhilft – zuerst eine einzelne Deklaration. Sieht die Seite danach wieder richtig aus, haben Sie den Übeltäter gefunden. Anschließend korrigieren Sie entweder den Wert oder löschen den toten Code. Große auskommentierte Blöcke gehören nicht dauerhaft in ein fertiges Stylesheet.

CSS- und HTML-Kommentare sind nicht dasselbe

HTML-Kommentare beginnen mit <!-- und enden mit -->; CSS-Kommentare verwenden /* und */. Fügen Sie HTML-Kommentarzeichen deshalb nicht in eine .css-Datei ein (und auch nicht in einen <style>-Block, denn dort gilt CSS-Syntax, nicht HTML). Jede Sprache hat ihre eigene Kommentarschreibweise. Wenn Sie HTML-Kommentare schon kennen, sehen Sie das hier als verwandte Fähigkeit mit anderen Zeichen.

Kommentare sind kein Geheimversteck

Jeder, der das Stylesheet öffnen kann (über „Seitenquelltext anzeigen“ oder den Netzwerk-Tab), kann Ihre Kommentare lesen. Schreiben Sie niemals Passwörter, private Schlüssel oder geheime Tokens in CSS-Kommentare. Kommentare sind für Entwicklungsnotizen gedacht, nicht zum Verstecken sensibler Daten.

Probieren Sie es selbst aus

  1. Öffnen Sie ein Übungs-Stylesheet (oder einen <style>-Block) mit einer .hero-Regel, die color und font-size setzt.
  2. Schreiben Sie über die Regel einen einzeiligen Kommentar, der die Farbwahl erklärt.
  3. Setzen Sie die Deklaration font-size in /* … */, speichern Sie und laden Sie die Seite neu – die Schriftgröße fällt auf den Standard zurück, die Farbe gilt weiterhin.
  4. Entfernen Sie die Kommentarzeichen um font-size und laden Sie noch einmal neu, damit der Stil wieder greift.
  5. Optional: Ergänzen Sie über der Regelgruppe einen kurzen mehrzeiligen Abschnittskommentar.

Typische Fehler

  • HTML-Zeichen (<!-- -->) in CSS verwenden – die CSS-Engine erkennt sie nicht als Kommentar
  • Das schließende */ vergessen, sodass der Rest des Stylesheets ignoriert wird
  • Kommentare verschachteln (/* outer /* inner */ still broken */) – CSS-Kommentare lassen sich nicht sauber verschachteln
  • Riesige auskommentierte Regelblöcke monatelang in Produktivdateien stehen lassen
  • Geheimnisse oder private URLs in Kommentaren ablegen

Zusammenfassung

  • CSS-Kommentare stehen zwischen /* und */
  • Der Browser ignoriert den Kommentartext beim Anwenden der Styles
  • Nutzen Sie sie für kurze Notizen, Abschnittsüberschriften oder zum vorübergehenden Deaktivieren beim Testen
  • HTML-Kommentare sehen so aus: <!-- --> – nicht mit CSS mischen
  • Kommentare sind im Quelltext sichtbar – legen Sie dort nie Geheimnisse ab

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
6
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 1
Css Tutorial