CSS Comments

CSS comments are notes added to a stylesheet to help people understand the code. They can explain why a style was added, divide a CSS file into sections, or temporarily stop some code from working.

Comments are ignored by the browser. They do not change the appearance or behaviour of the webpage.

A CSS comment starts with /* and ends with */.

/* This is a CSS comment */

Everything written between these symbols is treated as a comment.

Writing a Single-Line Comment

A short comment can be written on one line:

/* Style the main heading */
h1 {
  color: navy;
}

You can also place a comment beside a declaration:

h1 {
  color: navy; /* Main brand colour */
}

Both formats are correct. However, placing the comment on a separate line is often easier to read.

Single-line comments are useful for:

• Naming a small CSS section
• Explaining one declaration
• Leaving a short reminder
• Identifying a special design decision

Writing a Multi-Line Comment

A longer comment can continue across several lines:

/*
  These styles control the main heading.
  The larger size helps it stand out.
*/
h1 {
  color: navy;
  font-size: 40px;
}

You only need one opening /* and one closing */.

Use multi-line comments when an explanation needs more than one line. Keep the information short and relevant so the stylesheet remains easy to scan.

Temporarily Disabling CSS

You can place a declaration inside a comment to temporarily disable it:

button {
  color: white;
  /* background-color: blue; */
}

The browser applies color: white, but it ignores the background colour.

You can also disable a complete CSS rule:

/*
button {
  color: white;
  background-color: blue;
}
*/

This is useful when testing a design. However, remove old and unnecessary commented code after testing so the stylesheet does not become confusing.