CSS Comments

CSS comments are notes written inside CSS code that are ignored by the browser. Comments can explain code, organize stylesheets, and temporarily prevent CSS code from being applied.

Comments are useful when working on your own stylesheets and when working with other developers because they can provide information about the purpose or organization of the CSS.

Writing CSS Comments

A CSS comment begins with /* and ends with */. Everything between these markers is treated as a comment.

/* This is a CSS comment */

A comment can appear on its own line before a CSS rule.

/* Style paragraph text */
p {
  color: blue;
}

The comment describes the purpose of the rule, but it does not affect how the paragraph is displayed.

Multi-line CSS Comments

CSS comments can extend across multiple lines. The comment begins with /* and continues until the browser reaches the closing */.

/*
  Styles used for
  the main heading
*/
h1 {
  color: blue;
}

Multi-line comments can be useful for longer explanations or for identifying sections of a large stylesheet.

Comments Inside CSS Rules

Comments can also be placed inside a declaration block between CSS declarations.

p {
  color: blue;
  /* Increase the text size */
  font-size: 18px;
}

The comment is ignored while the color and font-size declarations are applied normally.

Temporarily Disabling CSS

Comments can be used to temporarily disable a CSS declaration or block of CSS while testing a webpage.

p {
  color: blue;
  /* font-size: 18px; */
}

In this example, the font-size declaration is inside a comment, so the browser ignores it. The declaration can be restored by removing the comment markers.

Commenting out CSS can be useful while testing, but old or unnecessary commented code should usually be removed from a finished stylesheet to keep the CSS easier to read and maintain.

CSS Comments Example

The following example uses comments to describe different parts of the CSS.

<style>
/* Style the heading */
h1 {
  color: blue;
}
/* Style the paragraph */
p {
  color: #333333;
  font-size: 18px;
}
</style>

<h1>CSS Comments</h1>
<p>Comments can help explain and organize CSS code.</p>

Play in Editor

The comments identify the purpose of each CSS rule. They are visible in the source code but do not appear in the browser result.