How to comment in CSS
How to comment in CSS

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.

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 documents.

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 comment in CSS?

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

Types of Comments 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 ðŸ‘‹

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply