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