The exponential growth of programming in the last decade or two was due to the collaboration among the coders & developers. The interoperability of a code written by one worked well for other.
The adhesive to it, out of many, is “comment”. You may wonder ‘How?’, but if you think it over again, I’m sure you will answer your own question. Let’s discuss it for curious minds out there. Commenting helps a new coder understand the code written by a person living in say, Morocco even though he is at Papua New Guinea. Yes, the comments help decode the thought applied while coding it.
Suppose you are writing a code today and will refer it when you retire, will you be able to understand the logic used there? Probably not. Hence, it can also be used by the same coder for future reference. It can also be used to test the code by hiding the redundant or experiment code inside the comment tag, this is very useful for software testers or coders. Comments are not read by the browser, it solely serves the coding community.
FreeCodeCamp explains the importance of comments and how it can help anyone wanting to edit it in future.
Yet it is best advised to keep comments to a minimum.
Here we shall learn how to comment in CSS code.
We use /* to notify a start of a comment to the browser & */ for the end of a comment. The comment can be a single line, multi-line, before or after the tag or wherever useful. The content inside these tag remains only in the source code, it will never be displayed.
We shall use a code to understand it practically. Follow the code and read the comments to understand the use of all properties in the code.
Here’s an example code:
<html> <head> <title> How to comment in CSS </title> </head> <body> <h1> I have a black background. </h1> <p> I'll be blue </p> <p id="check"> I'll be blue too. </p> </body> </html>
CSS Code:
body {
background-color: lightgrey; /*background color of the webpage will be lightgrey using this property */
color: blue; /*The color of the text in body will be blue*/
}
h1 {
background-color: black; /* This will convert grey background to black only for the content in h1 tag */
color: white; /* The color of the font inside h1 tag will be white */
}
#check{
text-shadow: 2px 2px 5px red; /* The first 2px is for horizontal shadow, second 2px for vertical shadow, 5px is for blur effect and red represents the shadow color*/
word-spacing: 10px; /* This property can increase or decrease the space between the words */
border-style: dashed; /* The content will be contained in a box with a dashed line. */
}
Here’s how the output will look like:
As you might have observed the code has got a lot of comments which help in understanding the property. Though you might have seen the properties for the first time, the comments & output shall make you comfortable about how to use it in your code. Always avoid using names of your colleague or someone whom you are assigning the part to be tested. Such comments are generally considered ‘ugly comments’. The example has used long text only for better understanding, but while you code be succinct in your comment.
Conclusion
It is interesting to note that comments like these are used in other languages and scripts as well. For example, you can also add comments in your HTML code. Though different languages can have different symbols for adding a comment.
While your start coding, you should follow the best-practices of adding comments. This is because adding useful comments is as much a part of coding as the code itself.
To learn how to center text in CSS, visit our previous post! To keep getting updates of such CSS tutorials, subscribe to our blog!