CSS comments are used for notes in the style blocks, whether inline, in the document head, or an external file. Comments are not displayed in the browser, and are great for making notes within the code for future reference.

A CSS comment begins with /*, followed by a space, then the comment itself, then another space, and closed with */.

/* this is a comment */

The CSS comment can also wrap to multiple lines and anything between the /* and */ will be ignored by the browser, including any code that you don’t want the browser to run. This is called “commenting out” code.

/* this is a
a much longer
comment

#primary {
    color: red;
}
*/

The following is a CSS comment placed in an external style sheet that will be linked to the HTML document. Since the entire document is CSS (the document ends with the .css file extension), the comment can be placed anywhere within the document (after the opening @charset “UTF-8”; line).

/* this is a comment */
#primary {
    color: red; /* this is a comment */
    font-size: 18px;
}
#secondary {
    margin-top: 35px;
} /* this is a comment */

As mentioned above, CSS comments can also be used to “comment out” a section of code that you’d like to keep intact for future use, but “turn off” for the time being. By wrapping a comment around the code, it will not be implemented by the browser.

The structure of the comment stays the same, but the comment itself is the code you no longer want the browser to run. In the following, the font-size property will not be applied.

#primary {
    color: red;
    /* font-size: 18px; */
}
#secondary {
    margin-top: 35px;
}

#primary {
    color: red;
    /* font-size: 18 */px;
}

The following is a block of styles, usually placed in the head of the HTML document. A CSS comment can be placed anywhere between the opening <style> tag and closing </style> tag, but not outside those HTML tags (that would call for an HTML comment) because everything outside the <style> tags are HTM, not CSS.

<style>
    /* this is a comment */
    #primary {
        color: red; /* this is a comment */
        font-size: 18px;
    }
    #secondary {
        margin-top: 35px;
    } /* this is a comment */
</style>

And again, we can “comment out” any code we don’t want applied by the browser.

<style>
    #primary {
        color: red;
        /* font-size: 18px; */
    }
    #secondary {
        margin-top: 35px;
    }
</style>

A CSS comment placed inside the HTML style attribute has the same form and must be located between the opening and closing quotes ” ” containing the style rules.

<p style="color: red; /* this is a comment */">A paragraph with red text.</p>

And yet again, the comment /* */ can be wrapped around part of the inline style to “comment out” that rule.

<p style="color: red; /* font-size: 16px; */">A paragraph with red text.</p>

---