Comments in Cascading Style Sheets (CSS)

The meaning of comments :

In the context of coding, a comment is a textual note that is placed inside the script. Its function is to act as a guide for explanation or as a memory tool to help with understanding the reasoning behind the code in the event that it needs to be reviewed and changed in the future.

From now on, it is necessary to emphasize that comments are hidden from the user on the website and appear only to those who are viewing the code.

CSS's use of commentary:

Annotations in CSS are placed between /*... */ delimiters. You may arrange them on a single line or several lines together.

In the example that comes next, we've added a comment to a single-line CSS code sample.

Example 1

1/* Any paragraph placed on the page will appear in red */
2p {
3    color: red;
4}

We also commented on a single line of CSS code in the example that follows.

Example 2

1p {
2    color: red; /* This characteristic makes the text turn red.
3 */
4}

In the following example, we also added a comment to the CSS code, which consists of several lines.

Example 3

1/*any paragraph placed on the page will appear in red color */
2p {
3    color: red;
4}

Notes:

• If the CSS code is placed in a .css file, you can write comments anywhere you like. • If the CSS code is within an HTML page inside the <style> tag, you must write the comment within this tag, or else the comment will be displayed as regular text on the page.

The difference between HTML and CSS comments:

Initially, the concept of comments in both languages is the same, and in both situations, comments are visible to people who inspect the page's code rather to the ordinary audience.

The difference lies only in the places where you can use each type.

HTML comments are placed anywhere on the page inside <!-- -->, but not inside the <style> tag. This tag is only meant to hold CSS code; if you include code from another language inside of it, the browser won't be able to interpret the commands that follow. As a result, the style code is inoperable.

In the following example, we placed an HTML comment and a CSS comment on the same page.

Example

 1 
 2<!-- Here, you can put comments using the html style -->
 3 
 4<style>
 5    /*here you can place comments using the css style */
 6 
 7    p {
 8            color: red;
 9    }
10</style>