Last Updated on February 13, 2021 by Roshan Parihar
In this tutorial, learn how to write CSS comments and make CSS codes commented. The short answer is: use the start tag /* and the closing tag */ with CSS codes inside them.
You can add commented descriptions to explain the CSS line of codes. Prefer adding comments in CSS codes to manage them in a better way.
Let’s find out with the examples given below.
What are Comments in CSS?
CSS comments are the line of texts or codes which are not visible in the frontend to the users. These are the best way of coding to add the explanation of codes in each line of CSS. Add the purpose of each line of CSS code to make it easily manageable in the future.
If the new user wants to change the piece of CSS codes. It may difficult to change or add CSS codes if they have no explanation of purpose. CSS comments make it easy for the coders to easily understand each line of code in just one view.
How to Write CSS Comments
To write CSS comments, you have to add the comment CSS codes or texts inside the start symbol /* and the end symbol */. You can add CSS codes or the text you want to make commented using the syntax given below:
|
1 |
/*Commented CSS codes or texts comes here*/ |
This is the single line commented CSS text or code. However, you can also add the multiline CSS comments using the same symbol. Multiline comments in CSS is useful to comment out multiple lines in CSS.
Single Line Comment
To write single line CSS comments, you have to use the method as given below:
|
1 2 3 4 5 |
/* This is a global setting */ *{ margin: 0; padding: 0; } |
The CSS comment in the above example describes the purpose of the CSS codes comes after the comment. This makes it easier for designers to understand the code to work out further.
Multi-Line Comments
To add multiline CSS comment, you can have to put the multiline CSS codes or texts inside the starting tag /* and end tag */. You can add as many codes of CSS to make comment as given below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/*-- Multiline Comment Start --*/ /* p{ margin: 0; padding: 0; } span{ margin: 2em 0.5em 1em; padding: 0.2em 1em; border: 2px solid #ff0000; } */ /*-- Multiline Comment End --*/ div{ width: 300px; height: 600px; } |
The above example shows the multiline CSS comments and you can increase the size as per your requirements.
You May Also Like to Read
I hope you like this tutorial on the CSS comment system to make CSS codes or texts commented.
Reference