CSS Comments

CSS Comments

CSS comments are used to explain your code and make it easier to understand. Comments are ignored by the browser and do not affect how styles are applied.

Using comments is a good habit, especially when working on large stylesheets or collaborating with other developers.

Single-Line and Multi-Line Comments

CSS uses the same comment syntax for both single-line and multi-line comments.

/* This is a single-line comment */
p {
  color: #333;
}

/*
  This is a multi-line comment.
  It can span across multiple lines.
*/
h1 {
  color: steelblue;
}

Why Use Comments?

Comments help describe the purpose of styles and make CSS easier to maintain.

• Explain complex or non-obvious rules
• Mark sections of a stylesheet
• Temporarily disable CSS rules
• Improve collaboration in team projects

Commenting Out CSS Code

You can use comments to temporarily disable parts of your CSS without deleting them.

/*
p {
  color: red;
}
*/

The rule above will not be applied because it is commented out.

Organizing CSS with Comments

Comments are often used to separate different sections in a stylesheet.

/* ===== Layout ===== */
.container {
  max-width: 1200px;
  margin: auto;
}

/* ===== Typography ===== */
body {
  font-family: Arial, sans-serif;
}

Best Practices

• Keep comments short and meaningful
• Avoid obvious comments that repeat the code
• Update comments when you update your CSS
• Remove unnecessary comments in production if needed

What’s Next?

Next, you will learn how to handle and debug common CSS errors.