CSS Comments Explained | How to Write & Use Comments in CSS

CSS Comments

CSS comments are used to explain code, improve readability, and temporarily disable CSS rules without deleting them.

What are CSS Comments?

CSS comments are notes written inside a CSS file that are ignored by the browser. They help developers understand and manage styles more easily.

CSS Comment Syntax

CSS uses a specific syntax for comments. Everything inside the comment will not be executed.

Example 1: Basic CSS Comment

/* This is a CSS comment */ p { color: blue; } 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS Comments</title>
    <style>

        /* This comment explains the paragraph style */
        p {
            color: blue;
            font-size: 18px;
        }

    </style>
</head>

<body>
    <p>This paragraph is styled using CSS.</p>
</body>

</html>

Output

This paragraph is styled using CSS.
Explanation:
• Comments are ignored by the browser
• Used to describe what the CSS does

2. Multi-line CSS Comments

CSS allows comments to span multiple lines. This is useful for longer explanations.

Example 2: Multi-line Comment

/* This style controls the appearance of headings */ h1 { color: green; text-align: center; } 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /*
                This style controls
                the appearance of headings
        */
        h1 {
            color: green;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>Styled Heading</h1>

</body>

</html>

Output

Styled Heading
Explanation:
• Multi-line comments improve clarity
• Ideal for documenting sections

3. Commenting Out CSS Code

CSS comments can be used to disable styles temporarily.

Example 3: Disable CSS Rule

p { color: red; /* font-size: 24px; */ } 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: red;
            /* font-size: 24px; */
        }
    </style>
</head>

<body>

    <p>Disable CSS Rule</p>

</body>

</html>
Explanation:
• Commented code will not run
• Useful for testing and debugging

Important Notes

✔ CSS comments start with /* and end with */
✔ CSS does not support single-line comments like //
✔ Comments do not affect performance

Frequently Asked Questions (FAQ)

Do comments affect page performance?
No, browsers completely ignore CSS comments.
Can I comment out multiple lines?
Yes, CSS comments can span multiple lines.
Are comments visible to users?
No, comments are only visible in the source code.
« Previous Next »