What are Comments in CSS?

A comment is a remark used to describe any part of the code. In CSS, we can add comments in our stylesheet to explain and document different sections of the code. It makes our code much more readable and easy to understand. When working on a project with a group of developers, incorporating comments assists others in understanding the structure of our design and its logic . It gives us an edge in maintaining and debugging the code later on. Since the browser does not display the comments, they have no impact on our design.

Syntax

Let's figure out how can we write comments along with css code.

We utilize special characters, i.e., / * * /, to help browsers identify comments and not mistake them for CSS commands. The CSS comment begins with / * and ends with the character * / to notify the browser not to show the text between them. We can use this syntax for both single-line and multiline comments. Although these characters are present in our code, they are not visible on our website.

Examples

The following example demonstrates how can we write comment along with css code.

How to Comment out in CSS?

In addition to documenting different code sections, comments are also used to comment out a piece of CSS code. Commenting out is a method that involves putting comment marks / * .. * / around a section of code to prevent it from running.

• It is a handy approach for testing and debugging CSS code. It is often necessary to disable some sections of code . Most programmers "comment out" the code in this way by beginning with /* and ending with /*.To find bugs, we may comment out some code . Once we've identified the error, we may remove the comment and re-insert the code . We may also comment the code while testing it since we may have to reverse it. After all, we don't know whether the new stuff works because we're constantly changing it.
• To improve the styles, developers can comment and experiment with various combinations of CSS properties.
• It may also be used to preserve large chunks of CSS code that we might wish to reuse later.

In the following example, we'll learn how to comment out some code.

HTML CODE :

CSS CODE :

OUTPUT: Because we commented it out, the text is not shown in green and is therefore invisible to the browser. We could even comment out the entire code block in the previous example.

OUTPUT: The paragraph element has no styles applied to it.

Single Line Comments (//) in CSS

Instead of using the standard method, some modern browsers allow us to comment out single lines of CSS by adding a double forward slash // in front of the code.

However, it is strongly suggested to avoid using this method for single-line comments due to the following reasons :

• It is not a standard method . Some browsers may support this approach, but the code may crash, causing our design to break.

• It is not cross-platform friendly. Some platforms may not support this method .The single-line comment begins with "//" and ends with a new line. If the new line is missing, part or all of our undesirable code will be commented out.

• The standard method is compatible with all browsers regardless of the operating system and architecture of the device.

HTML and CSS Comments

CSS comments function in the same way as HTML comments do. The syntax is what separates them. /*...*/ is used for CSS comments, while the HTML comments are enclosed within <!-- --> tags. The following example demonstrates HTML and CSS comments.

HTML code :

CSS code :