CSS COMMENTS

In CSS, comments are used to add notes or temporarily disable code. They are ignored by the browser.

Syntax

/* This is a CSS comment */

Single-line example

h1 {
  color: blue; /* Sets the text color to blue */
}

Multi-line example

/*
  This section styles
  the navigation menu
*/
nav {
  background-color: #333;
  color: white;
}

Commenting out code

You can temporarily disable CSS rules by commenting them out:

/*
p {
  color: red;
}
*/

Notes

• CSS supports only the /* ... */ comment syntax.
• There is no // single-line comment in standard CSS (although some preprocessors like Sass support it).

Example:

/* Main page styling */

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

/* Button styles */
button {
  background-color: blue;
  color: white;
  padding: 10px;
}

more details

CSS comments are an important part of writing clean, maintainable stylesheets. They help explain code, organize sections, and temporarily disable styles during development.

CSS Comment Syntax

CSS comments always begin with /* and end with */.

/* This is a CSS comment */

Everything between /* and */ is ignored by the browser.

---

Single-Line Comments

Although CSS doesn't have a special single-line comment syntax, you can write a comment on one line.

/* Header styles */
h1 {
    color: navy;
}

You can also place a comment at the end of a property.

h1 {
    color: blue; /* Text color */
    font-size: 32px; /* Heading size */
}

---

Multi-Line Comments

Comments can span multiple lines.

/*
==================================
Navigation Styles
Created by: John
Last Updated: July 2026
==================================
*/

nav {
    background: #222;
}

This is useful for documentation and separating sections.

---

Commenting Out Code

Developers often disable CSS rules without deleting them.

p {
    color: black;

    /*
    color: red;
    font-size: 30px;
    */
}

Or disable an entire rule.

/*
.button {
    background: green;
    color: white;
}
*/

---

Organizing Large Stylesheets

Comments make large files easier to read.

/* ==========================
   Reset Styles
========================== */

* {
    margin: 0;
    padding: 0;
}

/* ==========================
   Header
========================== */

header {
    background: black;
}

/* ==========================
   Navigation
========================== */

nav {
    display: flex;
}

---

Documenting CSS

Comments explain why certain code exists.

.card {
    width: 300px;

    /* Prevents the image from overflowing */
    overflow: hidden;
}

Good comments explain why, not just what.

Less useful:

/* Sets color to blue */
color: blue;

More useful:

/* Blue matches the company's branding guidelines */
color: blue;

---

TODO Comments

Developers often leave reminders.

/* TODO: Make this responsive */

.container {
    width: 1200px;
}

Or:

/* FIXME: Alignment breaks on Safari */

---

Nested Comments

CSS does not support nested comments.

Incorrect:

/* Outer comment

/* Inner comment */

End
*/

This causes errors because the first */ closes the comment.

---

Browser Behavior

The browser completely ignores comments.

/* Browser ignores this */

body {
    background: white;
}

Comments do not affect how styles are applied.

---

Comments in Minified CSS

Development CSS:

/* Header */
header {
    background: black;
}

/* Footer */
footer {
    background: gray;
}

Minified CSS:

header{background:black}footer{background:gray}

Comments are usually removed during minification to reduce file size.

---

CSS vs Other Languages

Language	Comment Syntax
CSS	/* comment */
HTML	<!-- comment -->
JavaScript	// or /* */
C/C++	// or /* */
Python	#

---

Common Mistakes

1. Using //

Incorrect:

// This is wrong
body {
    color: blue;
}

Correct:

/ * This is wrong * /   ❌ (spaces shown only for illustration)

The actual correct syntax is:

/* This is correct */
body {
    color: blue;
}

---

2. Forgetting to close a comment

Incorrect:

/* Header styles

body {
    color: black;
}

Always close it:

/* Header styles */

body {
    color: black;
}

---

Best Practices

• Use comments to explain complex logic or the reason behind styles.
• Divide large stylesheets into clearly labeled sections.
• Avoid commenting obvious code.
• Remove outdated or unused comments.
• Keep comments short, clear, and meaningful.

---

Complete Example

/* ==================================
   Global Styles
================================== */

body {
    font-family: Arial, sans-serif;
    background: #f4f4f4;
    color: #333;
}

/* ==================================
   Header
================================== */

header {
    background: #222;
    color: white;
    padding: 20px;
}

/* Navigation links */
nav a {
    color: white;
    text-decoration: none;
    margin-right: 20px;
}

/* ==================================
   Buttons
================================== */

.button {
    background: #007BFF;
    color: white;
    padding: 10px 20px;
    border: none;
}

/* TODO: Add hover animation */
.button:hover {
    background: #0056b3;
}

Using comments effectively makes CSS easier to understand, debug, and maintain—especially in large projects with multiple developers.