Hi 👋 fellow coders. Today we will learn CSS comments. Commenting on codes can be a good habit. But, It is more meaningful for other developers so they can understand your code. When you comment in your code it makes debugging easier while you are working on thousands of lines of code.

Also Read- Sliding Tabs using CSS

Why do we need comments?

A CSS comment is used to add notes to the code or to prevent the browser from interpreting specific code. CSS comments have no effect on style or HTML document.

And as I already mentioned it helps develop a large-scale app or website. Your team members can understand your code and can debug it.

How to comments in CSS?

In CSS, we use /* and */ to comment. Anything you write between these two symbols is a comment.

Types of Comment in CSS

There are two types of comments

  • Single line Comment
  • Multi line Comment

The structure of single line and multiline comments are the same in CSS. check the syntax below

Single line comment

/* I am a Single line comment */

As you can see, We started with /* symbols and finished with */ symbols.

Multiple line comment

/* I am 
a Multiple 
Line Comment */

We can write a multi-line comment by using multiple lines.

Example

Here, take a look at an example.

.p-card {
  background-color: blue; /*color of background is blue*/
  color: white; /* color of text is white*/
}
.p-card info heading {
  background-color: transparent;
  color: black;
  font-family: arial;
  font-weight: bold; /* we are creating heading so we used font weight bold here*/
}

Those comments have no effect on the code. You can use as many of them as you want.

Conclusion

While code commenting is a good habit, using it everywhere can break your code or make it difficult to read. But, comments are a useful way to describe your code or its functionality.

And with that said, This lesson ends here. Don’t forget to share it with your friends.

Until next time 👋