In this section, we will learn how to create comments in CSS.

Comments in CSS

Comments are a set of text description that we set inside a CSS source code. Note that browsers don’t care about comments! Basically, comments are for developers and not browsers! So anything we put into a source code as a comment will be skipped.

There are lots of reason why we use comments in CSS! Some of them are:

• To explain the structure of the source code for the future reference.
• To explain a potential bug in a code that needs to be solved to other developers that are going to work on the code.
• To comment out part of a source code that we don’t need without actually removing it.
• To set an opinion on part of a source code (perhaps a suggestion on how to make the code better etc.) for other developers to read.

Comments in CSS Syntax:

This is the syntax of creating a comment in a CSS source code:

/* comments…. */

A comment in CSS is surrounded by the opening `/*` symbol and closing `*/` symbol. Note that there’s no space between `/` and `*` for either opening or closing borders.

Now, within the provided space, we can add comments.

Note that comments in CSS can take multiple lines! To write a multiline comment, put the closing `*/` symbol in a few lines below the `/*` symbol and the space you get in between becomes the commenting area for adding new comments to the source code.

/*

comment…

comment…

comment…

*/

Note: If you’re familiar with programming languages like Java, C#, C, C++ or JavaScript, the syntax of comments in CSS is exactly the same as multiline commenting in these languages.

Example: single line comment in CSS

See the Pen single line comment in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: multi-lines comment in CSS

See the Pen multi-lines comment in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

Commenting Out in CSS

As mentioned before, using comments we can comment out those parts of a CSS source code that we don’t need, without actually removing the part of the code so that if we need them again, we can simply uncomment the code so that it becomes part of the source-code again.

Example: CSS comment out

See the Pen CSS comment out by Enjoy Tutorials (@enjoytutorials) on CodePen.

In this example, we’ve commented on the entire CSS source code and so no style applied to the HTML elements other than their initial styles.