CSS Comments

CSS comments allow developers to add notes and explanations inside a stylesheet without affecting how a webpage looks. They are useful for documenting code, explaining styling decisions, separating sections, and temporarily disabling CSS declarations during development.

Browsers ignore CSS comments when applying styles, so the text inside a comment does not appear on the webpage.

What Are CSS Comments?

A CSS comment is a piece of text written between /* and */. Everything inside these markers is treated as a comment until the closing marker.

Here is a simple example:

/* This is a CSS comment */

h1 {
  color: blue;
}

The comment explains the code but does not affect the heading’s appearance. The heading remains blue because of the color declaration.

Learn more about CSS rules in our CSS Syntax tutorial.

CSS Single-Line Comments

CSS does not have a separate single-line comment syntax. You can use the standard /* ... */ format on one line to write a short comment.

/* Style the main heading */
h1 {
  color: navy;
  font-size: 32px;
}

The browser ignores the comment and applies the styles normally.

You can also place a comment at the end of a declaration line:

p {
  color: #333; /* Set paragraph text color */
  line-height: 1.6;
}

Comments are useful when a declaration needs additional explanation.

CSS Multi-Line Comments

You can write comments across multiple lines by placing the text between /* and */.

/*
  Main website styles
  These rules control typography
  and general page appearance.
*/

body {
  font-family: Arial, sans-serif;
  background-color: #f4f7fb;
}

Multi-line comments are especially helpful when documenting larger stylesheets or explaining a group of related rules.

Using Comments to Organize CSS

Comments can divide a stylesheet into clear sections. This makes it easier to locate and update styles as a website grows.

/* ===== Global Styles ===== */

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* ===== Header Styles ===== */

.header {
  background-color: #0757b8;
  color: white;
  padding: 20px;
}

/* ===== Button Styles ===== */

.button {
  background-color: green;
  color: white;
  padding: 10px 16px;
}

The comments organize the stylesheet into global, header, and button sections without changing the rendered page.

Temporarily Disabling CSS with Comments

You can temporarily disable a declaration or rule by placing it inside a comment. This is useful when testing different styles.

p {
  color: black;

  /*
  font-size: 24px;
  background-color: yellow;
  */
}

In this example, the paragraph remains black, but the commented font size and background color are not applied.

Remember to remove the comment markers when you want those declarations to work again.

CSS Comments vs HTML Comments

CSS and HTML use different comment syntax.

Language	Comment Syntax
CSS	/* Comment */
HTML	<!-- Comment -->

For example, an HTML comment can be written inside an HTML document:

<!-- This is an HTML comment -->
<h1>Welcome to Web4Learners</h1>

A CSS comment belongs in a stylesheet or a <style> element:

<style>
  /* This is a CSS comment */
  h1 {
    color: blue;
  }
</style>

Learn more about HTML structure in our HTML Document Structure tutorial.

Important Rules for CSS Comments

Keep these points in mind when writing CSS comments:

• Always start a comment with /*.
• Close the comment with */.
• CSS comments cannot be nested reliably.
• Comments do not create visible content on the webpage.
• Avoid using comments to store passwords, API keys, or other secrets because stylesheet content may be publicly accessible.
• Write clear, useful comments instead of explaining every obvious declaration.