CSS Tutorial

CSS Comments

CSS comments are notes in your stylesheet that the browser ignores. They help you explain your code and temporarily switch styles off without deleting them.

What is a CSS comment?

A comment is text the browser skips when it reads your CSS. Comments are for humans, not machines. You use them to leave reminders, label sections, or turn a rule off while you test something.

Comment syntax

A CSS comment starts with a slash and asterisk, and ends with an asterisk and slash. Everything between them is ignored.

Single and multi-line comments

/* This is a comment */

/* Comments can also
   span multiple lines */
p {
  color: blue; /* set the paragraph color */
}

⚠️

CSS only supports the slash-asterisk style of comment. The double-slash (//) used in JavaScript does NOT work in CSS and will break your styles.

Using comments to disable styles

A handy trick is to wrap a rule in a comment so the browser ignores it. This lets you test how the page looks without that style, then bring it back by removing the comment marks.

Try commenting styles in and out

Example

<!DOCTYPE html>
<html>
<head>
<style>
  /* Page heading style */
  h1 {
    color: purple;
    text-align: center;
  }

  p {
    color: #333;
    /* background-color: yellow; */
  }
</style>
</head>
<body>
  <h1>CSS Comments</h1>
  <p>Remove the comment marks around background-color and re-run.</p>
</body>
</html>

When to use comments

To label sections of a large stylesheet, such as /* Header */.
To explain a tricky value or why it exists.
To temporarily disable a rule while testing.
To leave notes for teammates or your future self.

💡

Do not over-comment obvious things. Good comments explain WHY a style exists, not simply repeat what the code already says.

Key points

Comments are ignored by the browser.
Syntax is /* comment */ .
Comments can span multiple lines.
// does not work in CSS.
Use comments to document and to disable styles while testing.