CSS comments are used for notes in the style blocks, whether inline, in the document head, or an external file. Comments are not displayed in the browser, and are great for making notes within the code for future reference.
A CSS comment begins with /*, followed by a space, then the comment itself, then another space, and closed with */.
/* this is a comment */
The CSS comment can also wrap to multiple lines and anything between the /* and */ will be ignored by the browser, including any code that you don’t want the browser to run. This is called “commenting out” code.
/* this is a
a much longer
comment
#primary {
color: red;
}
*/
A Comment in an External Style Sheet
The following is a CSS comment placed in an external style sheet that will be linked to the HTML document. Since the entire document is CSS (the document ends with the .css file extension), the comment can be placed anywhere within the document (after the opening @charset “UTF-8”; line).
/* this is a comment */
#primary {
color: red; /* this is a comment */
font-size: 18px;
}
#secondary {
margin-top: 35px;
} /* this is a comment */
As mentioned above, CSS comments can also be used to “comment out” a section of code that you’d like to keep intact for future use, but “turn off” for the time being. By wrapping a comment around the code, it will not be implemented by the browser.
The structure of the comment stays the same, but the comment itself is the code you no longer want the browser to run. In the following, the font-size property will not be applied.
#primary {
color: red;
/* font-size: 18px; */
}
#secondary {
margin-top: 35px;
}
#primary { color: red; /* font-size: 18 */px; }
A Comment in a Block of Styles
The following is a block of styles, usually placed in the head of the HTML document. A CSS comment can be placed anywhere between the opening style
tag and closing /style
tag, but not outside those HTML tags (that would call for an HTML comment) because everything outside the style
tags are HTM, not CSS.
And again, we can “comment out” any code we don’t want applied by the browser.
A Comment in an Inline HTML Style
A CSS comment placed inside the HTML style attribute has the same form and must be located between the opening and closing quotes ” ” containing the style rules.
A paragraph with red text.
And yet again, the comment /* */ can be wrapped around part of the inline style to “comment out” that rule.
A paragraph with red text.
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.
Why 1SMARTchicken?
See More →
Thanks for your support!
CSS Books
All are affiliate links. Thank you for your support!
CSS NOTES:
- The “inherit”, “initial” and “unset” keywords can be used with any CSS property to set its value
- In CSS there are many ways to express a color value in a property
Feedback
If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.