CSS Comments

Comments in code are an integral part readable code which can describe what a particular piece of code is supposed to do. However, these should only give a brief but to the point information about the functionality not entire essays as that will make the code full of comments.

by Jibran Advani

Published on:
3 August 2021Last updated:
3 August 2021

It is very important to have comments in the code as these are suppose to give a brief but specific information to the reader of the code about what the code is supposed to do. CSS offers both multi-line and single-line comments.

A comment in code is simply the information that is ignored by the browsers while executing the code. In CSS, one can write some styles and then comment them out so those styles could be ignored by browsers.

With that said, let's have a look at some of the common forms of comments in CSS.

Single-line comments

Below is the example of a single-line comment which just gives a brief information about what the below code is supposed to do.

1/* To change colour to red */
2p {
3  color: red;
4}
5

Multi-line comments

Below is the example of a multi-line comment which just gives a brief information about what the below code is supposed to do.

1/* 
2  To change colour to red
3  To change background green
4*/
5p {
6  color: red;
7  background-color: green;
8}
9

Ignoring Styles

Below is the example of a comment which is just written, may be, for the purpose of testing during development but was intended to get ignored while final code runs.

1p {
2  color: red;
3  background-color: green;
4  /* font-size: 20px; */
5}
6

Comments in front of styles

Below is the example of a comment which is just written to explain the us of a particular style.

1p {
2  color: red;
3  background-color: green; /* To change background colour to green */
4}
5

Conclusion

The key take away from this article are as follows:

Comments are used improve code readability
Comments should be concise and to the point
CSS offers both multi-line and single-line comments.