How to comment in CSS
How to comment in CSS
This is the lesson 2 of 4 in the course CSS - Beginner to Advance

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.

Table of Contents

While it is not necessary for this lesson but if you are new to this course then take a look at lesson 1 in this course. Basic of CSS | CSS Beginner to Advance. Free for a limited time only.

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 πŸ‘‹

Course Navigation<< Basic of CSS | CSS- Beginner to AdvanceCSS Colors | CSS- Beginner to Advance >>
Click to rate this post!
[Total: 0 Average: 0]

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