How to write a CSS comment
A CSS comment starts with /* and ends with */. Everything between them is ignored by the browser, whether it spans one line or twenty.
There is only this one syntax. CSS has no separate single-line comment.
Where comments can go
A comment can sit anywhere whitespace is allowed: between rules, between declarations, after a value, inside a selector list. It works the same in a .css file, in a <style> element and in a style attribute.
/* Buttons */
.btn, /* default */
.btn-primary { /* variant */
padding: 8px 14px; /* 8px top and bottom, 14px sides */
}
<p style="color: #16a34a; /* inline comments work too */">Hello</p>
HTML comments, <!-- ... -->, are for markup, not for CSS. The two syntaxes are covered side by side on the HTML comments page.
Commenting out code
The everyday use of comments is switching a declaration off to see what it does, without deleting it. Wrap it in /* */:
Delete the /* and */ around the border line and the amber border appears. Commenting out a whole rule works the same way: put /* before the selector and */ after the closing brace.
Most editors toggle this for you: select lines and press Ctrl + / (Cmd + / on macOS).
Why // breaks your CSS
// looks like a comment because it is one in JavaScript, Sass and Less. In CSS it is just two characters, and they become part of whatever follows. The browser then sees an invalid selector and drops the entire next rule, with no error message.
The browser read // this is NOT a comment .one as one selector, which is invalid, so the whole .one rule was thrown away. Change the line to /* this is a comment */ and the green background comes back.
Comments do not nest
A comment ends at the first */. Wrapping code that already contains a comment ends your outer comment early:
To comment out a block that contains comments, remove or shorten the inner ones first.
Organizing a stylesheet with comments
Long stylesheets read better with section headings. A common convention:
/* ==========================================
Layout
========================================== */
.page { max-width: 960px; margin: 0 auto; }
/* ------------------------------------------
Header
------------------------------------------ */
.header { padding: 16px; }
/*! License: MIT (many minifiers keep comments that start with "!") */
Comments are sent to every visitor as part of the file and show in View Source, so never put passwords, internal URLs or notes you would not publish.
Common mistakes
- Using
//. It silently deletes the next rule. Use/* */. - Nesting comments. The first
*/ends the comment; the rest breaks the next rule. - Forgetting the closing
*/. Everything after the/*, to the end of the stylesheet, becomes a comment. - Using
<!-- -->inside CSS. That is HTML comment syntax and does not comment out CSS. - Leaving secrets in comments. They ship to the browser with the stylesheet.
Frequently Asked Questions
How do you comment in CSS?
Wrap the text in /* and */: /* This is a comment */. The same syntax works for one line or many, anywhere whitespace is allowed in a stylesheet.
Can you use // for comments in CSS?
No. CSS has no single-line comment. // is read as part of the next selector or declaration, which makes it invalid, so the browser drops that whole rule or declaration. Sass, Less and similar preprocessors accept //, but plain CSS does not.
Can CSS comments be nested?
No. A comment ends at the first */, so /* a /* b */ c */ ends after b, and the leftover c */ becomes junk that breaks the following rule.
What is the shortcut to comment in CSS?
In most code editors, including VS Code, Ctrl + / on Windows and Linux or Cmd + / on macOS wraps the selected lines in /* */, and pressing it again removes the comment.
Do CSS comments affect performance?
Only by adding bytes to the file. The browser discards them while parsing. Build tools minify stylesheets and remove comments; many keep comments that start with /*!, which is the convention for license notices.
