CSS Introduction

CSS Comments

Written by Swapnil RajaUpdated 30 Jul 2026

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.

PreviousHow to Add CSS NextCascade & Inheritance