Comments

Add notes to your CSS that browsers ignore.

Syntax/* This is a comment */

A CSS comment explains your code and is ignored by the browser. Comments start with /* and end with */.

Use comments to describe sections, temporarily disable rules, or leave reminders for yourself and teammates.

Example

Loading editor…

Press Run to see the result.

A developer uses comments to divide a large stylesheet into labeled sections so teammates navigate it quickly.
A developer temporarily comments out a conflicting rule during debugging without deleting it, re-enabling once the issue is found.
A team lead writes comments above complex layout rules explaining why a workaround was used, preventing future accidental removal.

Uses a comment as a visual section header to organize a stylesheet into clearly labeled regions.

/* === Typography === */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

Adds an inline comment explaining a non-obvious calculation so intent is preserved for future maintainers.

.hero {
  /* Full viewport height minus the 60px fixed nav */
  height: calc(100vh - 60px);
  background-color: #eef3ff;
}

Disables one declaration by wrapping it in /* */ without deleting it, allowing quick comparison during development.

h2 {
  color: #2965f1;
  /* font-size: 2rem; */
  font-size: 1.5rem;
}