It is a common practice to add comments in the code to enhance readability and add helpful notes alongside the code. Like most languages, CSS allows the users to add comments in the stylesheet.


Comments in CSS can be added by using the `/*` tag, which is then closed off by using `*/`.

> **Note:** Code that is commented out is **not** used to style the page.

This technique can be used to add both single _and_ multi-line comments.
$$$$
# 1. Single line comments
Single line comments can be added as follows:


>**Note:** Users may observe that the `//` tag can be used to add single line comments. However, this is **not** the standard practice in CSS and therefore should not be used. 
$$$$

# 2. Multi-line comments
Multi-line comments can be added using the same `/*` tag:

/* This is a 
MULTI LINE COMMENT 
in CSS */

# Example
Let's add comments to a functioning piece of code and see how it works:

/* Demonstrating how to add comments in CSS */
.Left-Pane {
  /* Commenting the width 
  width: calc(100% - 70%); */
  float: left;
  margin-right: 1em;
  padding: 30px;
  background: red;
  color: white;
}

.Right-Pane {
  width: calc(100% / 3);
  float: right;
  padding: 30px;
  color: white;
  background: blue;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="Left-Pane">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit reprehenderit culpa sunt magnam dolores pariatur qui error similique itaque accusamus. Quisquam voluptates sit veritatis eos!
</div>

<div class="Right-Pane">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit reprehenderit culpa sunt magnam dolores pariatur qui error similique itaque accusamus. Quisquam voluptates sit veritatis eos!
</div>

</body>
</html>

codemirror

How to add comments in CSS

Use /* to add single and multi-line comments in CSS. Comments enhance readability and add notes.