How to Add Comments in CSS

Download Now: Free CSS Coding Templates
Anna Fitzgerald
Anna Fitzgerald

Published:

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.

two web designers learning how to comment out in css

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.

 

Download Now: 25 HTML & CSS Hacks [Free Guide]

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.

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

/* 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.

coding-hacks

Related Articles

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Tangible tips and coding templates from experts to help you code better and faster.

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO