In CSS, comments are pieces of text ignored by the browser.
They’re used to explain code, leave notes, or temporarily disable styles without deleting them.
Syntax for CSS Comments
/* This is a CSS comment */
- Starts with
/* - Ends with
*/ - Can be placed anywhere in CSS.
- Cannot be nested (you can’t put one comment inside another).
Examples
1. Single-line comment
h1 {
color: red; /* This sets the heading color to red */
}
2. Multi-line comment
/* This CSS styles the paragraph text
to have blue color and larger font size */
p {
color: blue;
font-size: 18px;
}
3. Commenting out code
(Useful for testing styles without deleting them)
h2 {
/* color: green; */
font-size: 24px;
}
Here, color: green; won’t be applied because it’s inside a comment.
✅ Key Points
- CSS comments are not displayed in the browser.
- They help organize and document your styles.
- Good habit: Always comment complex or important CSS rules.
Here’s a visual example showing how CSS comments are ignored by the browser while other styles are applied.
Here’s a visual example showing how CSS comments are ignored by the browser while other styles are applied.
HTML (index.html)
<!DOCTYPE html>
<html>
<head>
<title>CSS Comments Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Main Heading</h1>
<p>This paragraph has visible styles.</p>
</body>
</html>
CSS (styles.css)
/* This CSS changes the heading color to red */
h1 {
color: red;
}
/* This paragraph style has two rules,
but one is commented out */
p {
/* color: blue; */ /* This is commented out, so text won't be blue */
font-size: 20px; /* This will still apply */
}
What you’ll see in the browser
- Main Heading → Red color (comment does not affect it, it’s just a note).
- Paragraph → Bigger text (20px), but default black color because the
color: blue;is commented out.
