html

How to comment in CSS

CSS is the key ingredient in making a presentable content of a webpage. CSS can be added internally, externally or inside an HTML element. While dealing with complex CSS files, developers tend to add comments to their content. The comments assist in modifying the file or understanding the style patterns used in that file.

As the CSS can be added using several methods, the comments in CSS are associated with the method being adopted to add CSS. To have a deeper insight into the comments in CSS, this post guides you to comment in CSS.

How comment works in CSS

Before adding comments in CSS, let’s have a short introduction to the syntax of comments in CSS. A comment is added by following the syntax provided below:

/* comment-line(s) */

A comment may comprise of single line and multi lines as well. These comments are not visible on the content displayed on the web however they direct you about the purpose of CSS styles.

How to comment in CSS

This section serves the following purposes:

  • To explore the possible ways to comment in CSS
  • Few examples that show how a comment is added

As mentioned earlier, the comments in CSS are associated with the methods to add CSS in an HTML page. The upcoming sections show the addition of comments to CSS:

How to add comments to an inline CSS

The inline CSS is defined inside an HTML element and the comment to that CSS is also added inside attributes of an HTML tag. The following image shows an inline CSS is used for <h1> tag and alongside CSS, comments are also added that describes the purpose of that CSS.

Text Description automatically generated

How to add comments to an internal CSS

The comments addition in all the aspects is same. Here, we will practice adding comments in the internal CSS. The image below shows that the CSS is use internally (inside head tag of HTML document). The h3 and p tags contain the style properties, we have added comments in front of each property:

Text Description automatically generated

How to add comments to an external CSS

An external CSS file is created to use it for multiple pages or for later use as well. It is suggested that comments must be added to the external CSS file, as the external CSS file is usually lengthy and contains a long list of styling properties. The image below shows a CSS file has multiple properties for HTML elements. The comments are added in front of each property to have a convey the purpose of the specific property.

A screenshot of a computer Description automatically generated with medium confidence

How to add a multi-line comment

The method of exercising a multi-line comment is the same as that of a single line comment. The syntax of both variation of comments is same: The image displayed below shows the usage of multi-line comments in an internal CSS:

Text Description automatically generated

Apart from adding a comment inside a tag, one may use comments before an HTML tag and describes that styling is being performed here:

Conclusion

The comments can be added in an inline CSS, an external CSS file and in an internal CSS. This article provides the various ways to add comments in CSS. Comments have a key role in defining the purpose of the style, so that it can be modified or changed easily. Like comments in other languages, the CSS comments may comprise of single line or multi line. In both cases, the syntax of using the comments remains the same.

About the author

Adnan Shabbir