How to Make Comments in CSS - ambistech

The comment is a special syntax that is used to provide an explanation of the code that we make.

The web browser will not execute comments that we write to the program.

In CSS, comments are written using /* ... */ in the CSS syntax.

Here is an example of writing.

		 	
    <style>
    	.container{
          width: 350px;	/* to set the width of the box container */
          height: 150px;	/* to set the height of the box container */
          padding: 15px;	/* to set the padding of the box container */
        }
    </style>
    
    <div class="container">
    	<p>Hello World!</p>
    </div>
  

Apart from being used to provide information about what we write, we can also use comments in this CSS to turn off CSS code so that it is not read as code to be executed.

Consider the following program, the program without comment.

		 	
    <style>
    	.container{
          color: blue;
          width: 50%;	
          height: 70px;
          padding: 20px;
          text-align: center;
          background-color: lightgrey;
          box-shadow: 0 0 9px black;
          border-radius: 7px;
        }
    </style>
    
    <div class="container">
    	<p>Hello World!</p>
    </div>
  

Hello World!

When we use comments.

		 	
    <style>
    	.container{
          /*color: blue;*/
          width: 50%;	
          height: 70px;
          padding: 20px;
          text-align: center;
          /*background-color: lightgrey;*/
          box-shadow: 0 0 9px black;
          /*border-radius: 7px;*/
        }
    </style>
    
    <div class="container">
    	<p>Hello World!</p>
    </div>
  

Hello World!

The example above is the use of single-line comments, we can also use multi-line comments.

Consider the following program.

		 	
    <style>
    	.container{
          width: 50%;	
          height: 70px;
          padding: 20px;
          text-align: center;
          border: 2px solid black;
          /*background-color: lightgrey;
          box-shadow: 0 0 9px black;
          border-radius: 7px;*/
        }
    </style>
    
    <div class="container">
    	<p>Hello World!</p>
    </div>
  

Hello World!

Apart from being in the <style>...</style> tag, we can also use comments in the inline-style CSS.

That was an example of using comments in CSS. The use of comments is very useful when we have a very long CSS style, if we don't want to use it, we just need to give it a comment, and if at any time we want to use it again, we just have to open the comment.