How to Add Comments in CSS for Yourself or Your Developer

In CSS, you can add comments to explain or organize different sections of your stylesheet. Doing so might seem like an extraneous step in the coding process, but comments can be extremely helpful when debugging or redesigning your website.

Why? Because they tell the reader what particular lines of your code are meant to do. These notes are particularly helpful if multiple developers are working on a website, or if you’ve inherited the site from another owner.

If you’ve looked through a stylesheet before or read enough blog posts with code snippets, you might have already seen comments. They’re recognizable by the /* */ marks that enclose them.

In this post, we’ll walk through how to create comments in CSS. Then, we’ll cover what it means to “comment out” in CSS and how to do it. Finally, we’ll cover another CSS commenting method you should avoid. Let’s get started.

You can add comments to your stylesheet in two ways. The most common format is a single-line comment, shown below:

 

/* This is a comment in CSS */
p {
  color: white;
  background-color: #2594A4;
}

A single-line comment can have its own line, or it can be placed on a line with active code, as shown here:

 

p {
  color: white; /* set the text color to white */
}

You can also format them as multi-line comments:

 

/* These words…
…are inside…
…the same comment. */

Comments in CSS are ignored by the browser and have no effect on how styles are rendered on the front end. The example below shows how comments can be used to tell any developer reading the code what each line does.

See the Pen CSS comments: example by HubSpot (@hubspot) on CodePen.

Comments work in both internal and external CSS, as well as with CSS frameworks like Bootstrap CSS.

In addition to explaining sections of code, comments are also frequently used to “comment out” a piece of CSS code.

Commenting out is a convenient trick to use when testing and debugging CSS code. It allows you to try various combinations of styling, since putting a declaration inside a comment makes it invisible to the browser.

Before we continue, let’s clarify what a rule set is. A rule set is a CSS selector and all the declarations inside the brackets. Below is a rule set for all paragraph elements on a web page (which we’ve been using in the examples above).

 

p {
  color: white;
  background-color: #FF5C35;
  padding: 10px;
}

Now let’s look at an example of an individual declaration within that rule set being commented out.

See the Pen CSS comments: commenting out 1 by HubSpot (@hubspot) on CodePen.

The declaration color: white no longer applies because it has been commented out.

Now, let’s look at another example where the entire rule set is commented out:

See the Pen CSS comments: commenting out 2 by HubSpot (@hubspot) on CodePen.

As you can see, no styling is being applied to the paragraph element.

CSS Single Line Comment

Technically, there is another way to comment-out single lines in CSS in some browsers, by placing a double forward-slash (//) in front of the code you want to comment out instead of using the standard /* ... */ method.

 

/* This line is commented out. */
// This line is commented out, but you shouldn't use this method!

However, it’s strongly recommended that you avoid this method in your code. The double-slash commenting method is not standardized in CSS (whereas the /* ... */ method is), meaning that it’s not guaranteed to work on all browsers.

Yes, it may work on some modern browsers. But, these browsers could sunset this feature at any time, meaning your comments will no longer be comments, your CSS will break, and your visitors will be confused.

To be safe, stick to the /* ... */ commenting method that we’ve been discussing since it’s firmly the standard, works across browsers and operating systems, and won’t be deprecated any time soon.

CSS Comments vs. HTML Comments

You also may have noticed that CSS comments work similarly to HTML comments. The difference between them is that CSS comments are designated with the symbols /* ... */, whereas HTML comments are enclosed in <!-- … --> tags.

The difference is shown in the example below:

See the Pen CSS comments vs. HTML comments by HubSpot (@hubspot) on CodePen.

Making Comments in CSS

If you’d like to add explanatory notes or prevent the browser from rendering specific parts of your style sheet, then you can use comments. Comments will not affect the interpretation of other parts of your stylesheet or the layout of your website on the front end. They’re also easy to create, even if you’re just getting started learning HTML and CSS.

Editor's note: This post was originally published in July 2020 and has been updated for comprehensiveness.