CSS Comments: A Beginner's Guide with Examples

CSS comments are notes or explanations you add inside your CSS code. The browser ignores them completely — they never appear on your web page. Comments help you and others understand your code, organize your styles, and document your work, making your CSS easier to read and maintain.

Here's how to use comments in CSS, with examples:

Basic Syntax

In CSS, a comment starts with /* and ends with */. Everything between these symbols is treated as a comment.

/* This is a single-line comment */

Example — explaining a single rule:

/* Make all paragraphs blue and slightly larger */
p {
  color: blue;
  font-size: 18px;
}

Multi-Line Comments

You can also write comments that span multiple lines — useful for longer explanations or section headers:

/*
  This is a multi-line comment
  It can span as many lines as you need
*/

Example — labeling a section of your stylesheet:

/*
  ============================
  HEADER STYLES
  ============================
*/
header {
  background-color: #333;
  color: white;
  padding: 20px;
}

/*
  ============================
  BUTTON STYLES
  ============================
*/
button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
}

Inline Comments (Within a Rule)

You can place a comment next to a specific line of CSS to explain what that line does:

.card {
  width: 300px;        /* fixed card width */
  padding: 16px;       /* space inside the card */
  border-radius: 8px;  /* rounded corners */
}

Comments for Temporarily Disabling Code

Comments are handy when testing. You can "turn off" a line or block of CSS without deleting it:

h1 {
  color: red;
  /* color: green; */   /* temporarily disabled — test red first */
}

What You Cannot Do

CSS only supports /* ... */ comments. Unlike JavaScript, it does not support // single-line comments:

/* This works */
// This does NOT work in CSS

Key Takeaways

• Use /* ... */ for every CSS comment.
• Comments are ignored by the browser and never shown to users.
• Use them to explain tricky code, label sections, and disable code while testing.
• Keep comments short, clear, and up to date.