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.

Summary

CSS comments begin with /* and end with */. They can contain a short note or span multiple lines, and the browser does not apply anything contained inside the comment.

Comments are useful for explaining CSS, organizing stylesheets, and temporarily disabling CSS while testing changes. This completes the CSS Getting Started section of the HTML Tutorials.