CSS Comments : How to Add Comments in CSS

In CSS, we can add comments to different sections of our style sheet. Comments in CSS are worked to clarify our code or not run available code. It will also support many users who are curious about the code. These CSS comments are omitted by browsers when we open the web/html pages on browser.

CSS comments might be numerous or one-line declarations. These comments start with /* and end with */.

These /* */ marks can be used for single and multi line comments in CSS.

In this CSS tutorial section , we’ll talk about how to create comments in CSS.

 

CSS Comments Syntax 

The following syntax shows comments in CSS for single and multiple lines.

/* write inside of the comment sign. */

 

Examples to add Comments in CSS file

The following example shows single and multiple-line comments in CSS

<!DOCTYPE html>

<html>

<head>

<style>

/* style tag for understanding */

#tutor { 

  border: 1px solid blue;

  color: red;

h1{

 color: blue;

 /* border: 1px solid blue; */

}

</style>

</head>

<body>

<link rel="stylesheet" type="text/CSS" href="path/style.css"> 

<h1> Single line CSS Comments </h1>

<p> Welcome to CSS tutorial </p>

<p id="tutor"> rrtutors.com </p>

</body>

</html>

 

 

Example 2

The following example shows the multi-lines comment in CSS

<!DOCTYPE html>

<html>

<head>

<style>

/* style tag 

   for understanding */

#tutor { 

  border: 1px solid blue;

  color: red;

/*

h1{

  color: blue;

 border: 1px solid blue; 

}

*/

</style>

</head>

<body>

<link rel="stylesheet" type="text/CSS" href="path/style.css"> 

<h1> CSS Comments </h1>

<p> Welcome to CSS tutorial </p>

<p id="tutor"> rrtutors.com </p>

</body>

</html>

 

Output

 

Conclusion

The CSS comment helps to understand and disable unwanted code. We can add a comment for the user and developer's code understanding

Keywords:

HTML Comments, Beautiful CSS Comments, CSS Single Line Comments