CSS Introduction
CSS Comments
Use CSS comments to document intent, explain unusual constraints, organize stylesheets, and temporarily isolate declarations while debugging.
CSS comments are used to explain code, add notes, or temporarily disable styles without deleting them.
Comments are ignored by the browser, meaning they do not affect how the webpage is displayed. The supporting concepts are explained in CSS Syntax and CSS Architecture.
They are very helpful for:
- Debugging by disabling specific CSS rules
- Making code easier to understand
- Organizing large stylesheets
Syntax
CSS comments are written using /* to start and */ to end.
CSS Comments Syntax
css
/* This is a CSS comment */CSS Comment Example
css
p {
color: blue; /* This sets text color to blue */
}Attributes
| Feature | Description | Example |
|---|---|---|
| Single-line | Comment written in one line | /Comment/ |
| Multi-line | Comment written across multiple lines | /Line 1 Line 2/ |
| Inline comment | Comment written beside a property | color: red; /text color/ |
Comment decisions, not visible syntax
Useful comments explain a browser workaround, a layout constraint, a token source, or why an apparently simpler declaration is unsafe. Avoid comments that merely repeat the property name. CSS comments cannot be nested, so temporarily commenting out a region that already contains comments can end the comment earlier than expected; disable individual declarations or use version control instead.
Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Comments Example</title>
<style>
/* This is a comment for body styling */
body {
background-color: lightgray;
}
h1 {
color: blue; /* Heading color */
}
/* Paragraph styling */
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<h1>CSS Comments</h1>
<p>This paragraph is styled using CSS with comments.</p>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| CSS comments | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
- Comments are completely ignored by browsers
- Useful for documenting code and improving readability
- Can be used to temporarily disable CSS rules during testing
- Always properly close comments using
*/ - Nested comments are not supported in CSS
Conclusion
CSS comments are a simple yet powerful tool for writing clean and maintainable code. They help developers understand styles better and make debugging easier without affecting the final output of the webpage.