Comments are ignored by the browser and Comments don't affect the styling or layout.

CSS Comments are enclosed between /* and */.

Why Use Comments?

Comments help with documentation and are helpful for the future users who read that code, so that they can understand it easily.

• Documentation: Comments help to understand the code easily.
• Debugging: Comments help to debug the code easily.
• Future Reference: Comments help to understand the code in the future.
• Code Readability: Comments help to make the code more readable.
• Code Disable: Comments help to disable the code temporarily.

Types of Comments

There are two types of comments in CSS:

1. Single-line Comment

Single-line comments are contained within one line. They are useful for short annotations.

Syntax for Single-line Comment

/* This is a single-line comment */

Example of Single-line Comment

/* This is a single line commnent */
p {
  /* color: red */
}

2. Multi-line comments

Multi-line comments span across multiple lines, making them ideal for detailed explanations or temporarily disabling blocks of code.

Syntax for Multi-line Comment

selector {
  /* property1: value1
    property1: value1
    property1: value1 */
}

These are similar to single-line comments, but this helps to comment large descriptions, notes, etc.

Example of Multi-line Comment

/* This is a
multi line
commment */
p {
  /* color: red;
    background-color: purple; */
  color: purple;
  background-color: red;
}

Some Tips

If you are using vs code, you can use cltr + / to comment the line.
These is a shortcut to comment the line in the vs code.

Conclusion

Comments are ignored by the browser and don't affect the styling or layout. They are used to make the code more readable and understandable.