How to Add Comments in CSS

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.

How to Comment in CSS

To comment in CSS, simply place your plain text inside /* */ marks. This tells the browser that they are notes and should not be rendered on the front end.

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

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

You can also format them as multi-line comments:

Comments in CSS are ignored by the browser and have no effect on how styles are rendered on the front end.

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.

Comment Out CSS

In CSS, commenting out is the practice of placing comment marks (/* */) around a segment of code to deactivate it. Commenting out allows developers to turn off certain styling while saving the code for later use. It can also be used to preserve entire blocks of CSS code you may want to use later without deleting it.

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).

Now, let's take a look at several examples and use cases for commenting out CSS and when you might want to use it.

Comment Out CSS Examples

1. Deactivate CSS Declarations

As mentioned, one of the most popular use cases for commenting out CSS is to deactivate CSS rules and declarations, allowing you to test alternatives or debug code.

Let's take a look at how to comment out an individual CSS declaration within a rule set.

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.

2. Add Notes & Explanations to CSS

Another popular use case for CSS comments is to add notes for yourself or other developers. 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.

You can also use it to explain an entire CSS rule and what it affects or changes on the page.

3. Denote the Start & End of CSS Rules

If you have a long and unwieldy CSS document, you can also use CSS comments to denote the start and end of entire rule sets. This works specially well if you have a vast collection of CSS classes for specific HTML elements.

See the Pen CSS comments example: start and end of style by HubSpot (@hubspot) on CodePen.

4. Provide Editing Instructions

Aside from explaining what each CSS declaration does, like in the second example, you can also use CSS comments to provide editing instructions to other developers.

Assuming you're actively working on a website, you can denote what to edit or what not to edit, or specify other parameters and changes.

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

How to Comment Out CSS: Try It Yourself

It's now time to try out commenting out in CSS. It's simple and easy, but if you're working on a live website, it can be daunting at first — because accidentally commenting out an entire rule or declaration can make things go awry.

Below is a simple webpage with a video background coded in CSS. Video backgrounds are delicate and can quickly look wrong if a declaration is commented out. Play around and see what commenting out each line does to the page.

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

The code module above is editable! Toggle between the HTML and CSS tabs, edit the code, and click rerun in the bottom right-hand corner.

Here are a few more things you can try:

• Comment out the heading's font color
• Comment out the video's z-index declaration
• Comment out the entire @media rule
• Add notes about the @media rule and what it does
• Provide editing instructions for the page's content

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.

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.