CSS Comments Tutorial


Comments are an important part of programming and scripting. CSS or Cascade Style Sheet also provides different types of comments like single-line comment, multi-line comment, part of the line comment. Also, CSS comments can be used to organize the CSS code or make some tests about CSS code by commenting on or out CSS code.

Single Line Comment

The most basic and used comment type is the single-line comment. Only one is commented by using the sign /* ... */. The comment will be put between the /* and */. In the following example, we can see that the comments are styled with a different single color in order to distinguish the comments from the code. In this case, the comments are colored as green.

<html>
<head>
<style>

/* This is a single-line comment */

/* This is a single-line comment too */
p {
  /* This is a single-line comment */
  color: red;
} 
/* This is a single-line comment */

</style>
</head>
<body>

<p>Poftut.com!</p>
<p>This paragraph is styled with CSS.</p>

</body>
</html>
Single Line Comment

Multiline Comment

We can also create multi line comments by using /* ... */ which is the same with the single line comment. The only difference is the content will wrap into multiple lines.

<html>
<head>
<style>

/* This is 
a multi-line 
comment */

p {
  /* This is 
  a multi-line 
  comment */
  
  color: red;/* This is 
  a multi-line 
  comment */
} 

/* This is 
a multi-line 
comment */

</style>
</head>
<body>

<p>Poftut.com!</p>
<p>This paragraph is styled with CSS.</p>

</body>
</html>
Multi-line Comment

Part Of The Line Comment

In some cases we may need to create CSS comment some part of the single line where starting from the end f the expression to the end of line. /* ... */ alo used for part of the line comments. Below we will create comments which will start from specified location of the line to the end of the line.

<html>
<head>
<style>

p {/* This is comment */
  color: red;/* This is comment */
} /* This is comment */


</style>
</head>
<body>

<p>Poftut.com!</p>
<p>This paragraph is styled with CSS.</p>

</body>
</html>
Part Of The Line Comment

Organize CSS Code with Comments

Comments are not only used to explain given line or part of the CSS code. CSS comments can be also used for organize the CSS code by providing table of contents or numbering about the code. Below we will create a Table Of Contentsabout the CSS code and put related code inside these code blocks.

<style>
/* 
*  CSS TABLE OF CONTENTS
*   
*  1.0 - General
*  2.0 - Buttons
*  3.0 - Image
*/

/*** 1.0 - General ***/
h2 {
  font-size: 1.2em;
}


/*** 2.0 - Buttons ***/
input {
  font-size: 0.6em;
}



/*** 3.0 - Image ***/
img {
  border: 0.6em;
}

</style>

Comment CSS Code For Testing

While developing CSS code developers generally creates different styles and designs and make tests. While creating this CSS code using comment can be beneficial in order to make some CSS code disable and enable other CSS code. Below firsts we will enable

<html>
<head>
<style>

p{
  color: red;
  /* color: green; */
}

</style>
</head>
<body>

<p>Poftut.com!</p>
<p>This paragraph is styled with CSS.</p>

</body>
</html>
Comment CSS Code For Testing

LEARN MORE  Java - Basics and Comments

Leave a Comment