CSS Comment

What are CSS Comments?

CSS comments are notes written inside a CSS file. Browsers ignore comments, so they do not change the appearance of a webpage. Comments help you explain your code, organize sections, and make your CSS easier to understand.

Why Use CSS Comments?

Beginners use comments to remember what a CSS rule does. Professional developers use comments to organize large stylesheets, leave notes, and temporarily disable CSS while testing.

Syntax of CSS Comments

A CSS comment starts with /* and ends with */. Anything between these symbols is ignored by the browser.

/* This text is a comment. The browser ignores it. */

body {
    font-family: Arial, sans-serif;
    background: #f0f7ff;
    padding: 24px;
}

h1 {
    color: #0d6efd;
}

p {
    color: #334155;
    font-size: 18px;
}

Step 1: Create Your First CSS Comment

Every CSS comment starts with /* and ends with */. Comments alone do not style the page — you still need CSS rules.

/* My first CSS comment */

h1 {
    color: #4f46e5;
}

p {
    color: #475569;
    font-size: 18px;
}

Step 2: Add a Comment Before a Rule

Place a comment above a rule to explain what the rule does. The comment is ignored; only the rule is applied.

/* Make the main heading blue */
h1 {
    color: blue;
}

/* Style the paragraph text */
p {
    color: #333;
    font-size: 18px;
    line-height: 1.6;
}

Step 3: Organize Your CSS with Section Comments

Use section comments to group related rules. This keeps large stylesheets easier to read.

/* ===== Header styles ===== */
h1 {
    color: #0d6efd;
    margin-bottom: 12px;
}

/* ===== Paragraph styles ===== */
p {
    color: #555;
    font-size: 18px;
}

/* ===== Button styles ===== */
button {
    background: #0d6efd;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    cursor: pointer;
}

Step 4: Disable a Property While Testing

Comment out one property to turn it off without deleting it. In the example below, font-size: 40px is disabled, so the heading stays the default size.

h1 {
    color: #0056b3;
    /* font-size: 40px;  ← this property is disabled */
}

p {
    color: #444;
    font-size: 18px;
}

Step 5: Disable an Entire CSS Rule

Wrap a full rule in a comment to disable it. Below, the red heading rule is off, so only the green paragraph style is applied.

/*
h1 {
    color: red;
    font-size: 40px;
}
*/

p {
    color: green;
    font-size: 18px;
}

h1 {
    color: #0f172a;
}

Complete Example

A small page stylesheet organized with comments. Try editing colors in the preview.

/* Page background and base text */
body {
    font-family: Arial, sans-serif;
    background: #f4f8ff;
    padding: 24px;
    color: #1e293b;
}

/* Main heading */
h1 {
    color: #0056b3;
    margin-bottom: 10px;
}

/* Supporting text */
p {
    color: #444;
    font-size: 18px;
    line-height: 1.6;
}

/* Primary button */
button {
    background: #007BFF;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
}

/* Button hover state */
button:hover {
    background: #0056b3;
}

Common Mistakes

Always close comments with */. Unclosed comments can disable the rest of your CSS. Also never use HTML comments (<!-- -->) inside CSS.

/* CORRECT: comment is closed, then rules work */

/* Style the heading */
h1 {
    color: #dc2626;
}

/* Style the paragraph */
p {
    color: #166534;
    font-size: 18px;
}

Best Practices

• Write short and meaningful comments.
• Use comments before important sections.
• Keep comments updated.
• Always close comments using */.
• Use comments while testing CSS.
• Remove unnecessary comments before publishing.
• Avoid HTML comments inside CSS.
• Organize large stylesheets with section comments.

Web Resources on How to Add Comments in CSS

1. MDN Web Docs : Add Comments in CSS
2. CSS Tricks.com : The Art of Comments
3. Dev.to : How and Why we add comments in CSS
4. SASS Lang.com : Comments