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

/* This is a CSS comment */

Step 1: Create Your First CSS Comment

Every CSS comment starts with /* and ends with */.

/* My first CSS comment */

Step 2: Add a Comment Before a Rule

/* Change the heading color */
h1{
    color:blue;
}

Step 3: Organize Your CSS

/* Header */
h1{
    color:#0d6efd;
}

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

Step 4: Disable a Property While Testing

You can temporarily disable one property by commenting it.

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

Step 5: Disable an Entire CSS Rule

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

p{
    color:green;
}

Complete Example

/* Page Background */
body{
    font-family:Arial,sans-serif;
    background:#f4f8ff;
}

/* Heading */
h1{
    color:#0056b3;
}

/* Paragraph */
p{
    color:#444;
}

/* Button */
button{
    background:#007BFF;
    color:white;
    border:none;
    padding:10px 18px;
}

button:hover{
    background:#0056b3;
}

Common Mistakes

/* Wrong - Missing closing symbols

h1{
    color:red;
}

/* Wrong - HTML comment */


/* Correct */
h1{
    color:red;
}

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 :