How and Why we add comments in CSS

CSS Comments

Comments are used to explain the code, and may help when you edit the source code at a later date.
Comments are ignored by browsers.
A CSS comment is placed inside the <style> element, and starts with /* and ends with */:

Example

/* This is a single-line comment */
p {
  color: red;
}

You can add comments wherever you want in the code:

Example

p {
  color: red;  /* Set text color to red */
}

Even in the middle of a code line:

Example

p {
  color: /*red*/blue; 
}

Comments can also span multiple lines:

Example

/* This is
a multi-line
comment */

p {
  color: red;
}

Difference between HTML comments and CSS comments

In HTML, all comments are technically multi-line.
In CSS, single-line comments start with // and end at the end of the line, while multi-line comments start with /* and end with */
CSS comments work similarly to HTML comments.
The difference between them is that CSS comments are designated with the symbols /* ... */, whereas HTML comments are enclosed in <!

How we add comments in CSS

In CSS, we can add comments to explain or organize different sections of your stylesheet. Doing so might seem like an extraneous step in the coding process, but comments can be extremely helpful when debugging or redesigning your website.