How Do You Add a Comment in a CSS File?

When writing CSS, comments are essential for improving code clarity, collaboration, and future maintenance. They help you explain why certain styles are applied, organize sections, or temporarily disable lines during debugging — without affecting how the page is rendered.

In this blog, you’ll learn exactly how to add comments in a CSS file, see practical examples, and explore best practices for using comments effectively in your stylesheets.

Table of Contents

🧾 Syntax for CSS Comments

CSS uses a specific syntax for adding comments:

/* This is a CSS comment */

Starts with /*
Ends with */
Can span multiple lines

✅ Example:

/* Main container styles */
.container {
  width: 100%;
  margin: 0 auto;
}

This comment will be ignored by the browser but visible in your source code.

❌ HTML-Style Comments Don’t Work in CSS

Avoid using  for comments in CSS. That syntax is only valid in HTML and will not work in CSS stylesheets.

<!-- This is invalid in CSS -->

💡 Multi-line Comments

You can write comments that span multiple lines by simply placing the text between /* and */.

/* 
  This section handles the layout of the hero banner.
  It includes background image, alignment, and padding.
*/
.hero-banner {
  background: url('banner.jpg');
  padding: 50px;
  text-align: center;
}

🎯 Why Use Comments in CSS?

Organize your code
Explain complex styles
Leave notes for other developers (or future you!)
Temporarily disable styles without deleting

✂️ Temporarily Disabling CSS Rules

You can comment out specific lines of CSS for testing or debugging:

/* .button {
  background-color: red;
} */

This prevents the rule from being applied without deleting it.

🧠 Best Practices for CSS Comments

Use comments to clarify intent, not obvious styles.
Group related styles with section comments.
Avoid over-commenting — keep your CSS clean and readable.
Use comments in collaborative projects to explain decisions.

📌 Conclusion

To add a comment in a CSS file, simply use:

/* Your comment here */

It’s a powerful way to make your stylesheets more organized, understandable, and maintainable — especially on larger projects.