CSS Comments

Add W3Buddy as a preferred source on Google

Article Summary

CSS Tutorial: Learn how to write comments in CSS to organize your code and leave helpful notes. Syntax and best practices included.

CSS comments let you leave notes inside your CSS file. These notes are ignored by the browser, but super helpful for you or other developers reading the code.

🖊️ Syntax

/* This is a CSS comment */

Comments can be on their own line or inline after a rule.

/* Style for the hero section */
.hero {
  background: #f5f5f5; /* light gray background */
  padding: 40px;
}

💡 Why Use Comments?

🧠 Explain sections or logic.
🧹 Separate and organize large stylesheets.
🔍 Debug faster by temporarily disabling styles.

/*
.main-content {
  display: grid;
}
*/

❗ Things to Remember

CSS comments use /* */ (not // like JavaScript).
Don’t nest comments — it will break your CSS.

/* Wrong example:
/* nested comment */
*/

✅ Best Practices

Use comments to label major sections:

/* ========== Header Styles ========== */

Keep comments short and clear.
Avoid over-commenting obvious styles.