CSS Comments

Share this article

Every programming language lets you add notes and other hints that help you understand what’s going on. Not all CSS is as understandable at first glance as, say, something like font-size: 20px, so some sections of code can benefit from adding notes or other hints in their vicinity. Here’s an example:

.cf {
  zoom: 1; /* for IE6 and IE7 */
}
The comment in this line of code is the part that says “for IE6 and IE7,” and is identifiable as such by the preceding backslash followed by an asterisk, and the asterisk and backslash at the end. We can add as many of these to our stylesheet as we like, and it’s good practice to use CSS comments to help identify parts of any stylesheet that might be difficult to understand from a cursory glance. By using CSS comments to make our stylesheets more readable, the CSS will be easier to maintain in the future. A CSS comment can span multiple lines if required. Everything that’s in between the opening and closing comment characters will be ignored by the browser, and so will the comment characters themselves. So often you’ll see something like this in a CSS file:
/***************************
****************************
These are the styles for
the header section
****************************
***************************/
Notice that, in this example, not only have I included the opening and closing asterisk and backslash characters, but I’ve also added some extra asterisk characters spanning multiple lines. This makes the comment easy to find when scrolling through the CSS file. Add section headings like this in CSS to help organize it into readable, related chunks of code. Unfortunately, CSS doesn’t have an easy way to present a valid, single-line comment that uses just an opening comment character combo. For example, in JavaScript, you can comment out a single line of code like this:
// This is a JavaScript comment
This is helpful in JavaScript because it makes it easy to nullify an entire line of code, or add a helpful comment, with just two characters (the backslashes). But in CSS it’s necessary to use both the opening and closing characters to specify the boundaries of any comments. For quick, temporary fixes, however, it’s acceptable to create a sort of faux CSS comment by applying the principle we discussed in the previous section on CSS errors. Let’s say we have the following CSS:
.center-global {
  max-width: 1020px;
  margin: 0 auto;
}
And let’s say we want to temporarily remove the first line (the max-width
declaration). We could do this:
.center-global {
 /* max-width: 1020px; */
  margin: 0 auto;
}
This works fine, but a quicker way to achieve the same result is simply to put some random characters at the beginning of the line, like so:
.center-global {
 AAAAmax-width: 1020px;
 margin: 0 auto;
}
It’s quick and effective, but don’t ever leave your CSS like this on a live website. It’s not valid CSS and should only be used in development for doing quick debugging.

Frequently Asked Questions (FAQs) about CSS Comments

What is the purpose of using comments in CSS?

Comments in CSS are used for a variety of reasons. They can be used to explain the purpose of a specific section of code, making it easier for others (or even yourself at a later date) to understand what the code is doing. Comments can also be used to temporarily disable a section of code during debugging, without having to delete it. This can be particularly useful when testing different styles or layouts.

How do I write a comment in CSS?

In CSS, comments are written by enclosing the text within a /* and /. For example, / This is a comment */. Everything between these symbols will be ignored by the browser, allowing you to write notes or temporarily disable sections of code.

Can I use comments in CSS to disable a section of code?

Yes, you can use comments in CSS to temporarily disable a section of code. This can be useful when you’re debugging or testing different styles. To do this, simply enclose the section of code you want to disable within a /* and /. For example, / p { color: red; } */. The browser will ignore everything between these symbols.

Are there different types of comments in CSS?

No, there is only one type of comment in CSS, which is written by enclosing the text within a /* and */. However, you can use comments in different ways, such as for explaining code, disabling code, or separating sections of code.

Can I use comments in CSS to separate sections of code?

Yes, you can use comments in CSS to separate and organize sections of code. This can make your code easier to read and understand. For example, you might use comments to label different sections of your stylesheet, like /* Header Styles /, / Main Content Styles /, and / Footer Styles */.

Can comments in CSS span multiple lines?

Yes, comments in CSS can span multiple lines. Everything between the /* and */ will be ignored by the browser, regardless of how many lines it spans. This can be useful when you need to write a longer explanation or disable a larger section of code.

Can I nest comments in CSS?

No, you cannot nest comments in CSS. If you try to nest comments, the browser will interpret the end of the first comment as the end of the entire comment, which can cause unexpected results. If you need to write a comment within a comment, you should end the first comment, write the second comment, and then start a new comment.

Do comments in CSS affect the performance of a website?

No, comments in CSS do not affect the performance of a website. The browser simply ignores everything within the /* and */, so it has no impact on how the CSS is processed or how the website is rendered.

Can I use comments in CSS to create a to-do list?

Yes, you can use comments in CSS to create a to-do list. This can be a useful way to keep track of changes you need to make or features you want to add. For example, you might write a comment like /* TODO: Add styles for new widget */.

Are comments in CSS visible to website visitors?

No, comments in CSS are not visible to website visitors. They are only visible in the source code, which can be viewed by right-clicking on the webpage and selecting “View Page Source” or “Inspect”. However, it’s worth noting that anyone who views the source code will be able to see the comments, so you should avoid including sensitive information in your comments.

Adam RobertsAdam Roberts
View Author

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week