CSS Comments

CSS Comments

CSS comments are notes added to CSS code that are ignored by the browser. Comments can explain what CSS rules do, help organize a stylesheet, or temporarily prevent CSS code from being applied.

Adding CSS Comments

A CSS comment begins with /* and ends with */. Anything between these markers is treated as a comment and is not applied as CSS by the browser.

/* This is a CSS comment */

p {
  color: blue;
}

The comment explains the code but does not affect how the paragraph is displayed.

Single-Line Comments

A short CSS comment can be written on a single line.

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

CSS does not use // for standard comments. Always use /* to begin a CSS comment and */ to end it.

Multiple-Line Comments

A CSS comment can also extend across multiple lines. This is useful when a longer explanation is needed.

/*
  These styles control
  the appearance of paragraphs.
*/
p {
  color: blue;
  font-size: 16px;
}

The same /* and */ markers are used whether the comment occupies one line or several lines.

Using Comments to Organize CSS

Comments can be used as labels to divide a stylesheet into sections. This can make a larger CSS file easier to read and maintain.

/* Page Styles */
body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Heading Styles */
h1 {
  color: #0088cc;
}

/* Paragraph Styles */
p {
  color: #333333;
}

The section comments are for people reading the stylesheet and have no effect on the styles displayed by the browser.

Temporarily Disabling CSS

Comments can temporarily prevent a CSS declaration or rule from being applied. This can be useful when testing changes without deleting the original code.

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

In this example, the paragraph will be blue, but the commented font-size declaration will not be applied.

An entire CSS rule can also be placed inside a comment:

/*
p {
  color: blue;
}
*/

The browser ignores the commented rule until the comment markers are removed.

CSS Comments vs HTML Comments

CSS and HTML use different comment syntax. CSS comments use /* and */, while HTML comments use <!-- and -->.

/* This is a CSS comment */

/* CSS comments belong inside CSS code. */

<!-- This is an HTML comment -->

Use the comment syntax that belongs to the language you are writing.