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:
/* This is a comment in CSS */
A single-line comment can have its own line, or it can be placed on a line with active code, as shown here:
color: white; /* set the text color to white */
You can also format them as multi-line comments:
/* These words…
…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.
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 look at an example of an individual declaration within that rule set being commented out.
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:
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:
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.