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.
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.
/* This is a CSS comment */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 */ |
Example
<!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>Output
Browser Output
- The page will have a light gray background
- The heading will appear in blue color
- The paragraph will appear in green with larger font size
- Comments will not be visible in the browser
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
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.
