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.
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.
How to Add Comments in CSS
Updated:
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.
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:
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:
color: white; /* set the text color to white */
}
You can also format them as multi-line comments:
…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.
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).
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:
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, 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.
Don't forget to share this post!
Related Articles
15 Best HTML & CSS Code Editors for 2024
What Are Rem Units? (& How to Use Them in CSS)
12 Best CSS Tools for Developers (or Anyone Else)
How to Center an Image with HTML and CSS [+ Code Modules]
How to Create a Video Background with CSS
How to Import Bootstrap in React [The Beginner's Guide]
How to Create Scrolling Text With CSS [+ Code Examples]
How to Draw a Circle Using the CSS Border Radius Property
How to Set Opacity of Images, Text & More in CSS
How to Hide the Scrollbar in CSS