Comment Syntax In Css – Comments in CSS

Comments in CSS

CSS comments are not visible in the browser, although they can be helpful in source code documentation. Code explanations are provided through comments, which may be useful if you decide to edit the source code in the future. Browsers don’t read comments. A CSS comment begins with /* and finishes with */ and is inserted inside the <style> element.

There are two types of comments a single line and multiple lines.

Example :

/* single line */

/* I'm multiple  
Lines  
Comments */

A single-line comment may be placed on its own line or on a line containing active code, as demonstrated in the following example:

p{
color : blue; /* text color of p tag is blue */
}

Both internal and external CSS, as well as CSS frameworks like Bootstrap CSS, support comments. Comments are sometimes used to “comment out” a segment of CSS code in addition to describing that section of the code.

Comment Out CSS declaration

The act of enclosing a section of CSS code in comment marks (/* */) to make it inactive is known as commenting out. While preserving the code for future usage, developers can disable certain styling by commenting on it. Furthermore, you may use it to keep whole blocks of CSS code that you might need in the future without removing them.

How To Write Css Code Syntax of CSS

When testing and debugging CSS code, it’s practical to utilize the commenting out technique. Since inserting a declaration inside a comment renders it invisible to the browser, it enables you to experiment with different stylistic combinations.

p {  
/*color: red;*/
text-align: center;
}

Here we comment on our color properties which are not applied by browsers, they use the default color black and set the text-align center.

CSS Single Line Comment

Practically, there is an alternative to utilising the conventional /*… */ approach to commenting on single lines of CSS in some browsers. This alternative involves adding a double forward slash (//) in front of the code you want to disable.

/* This line is commented out. */
//This line is commenting out but not prefer to use

It is strongly advised that you do not use this technique in your code. Since the /*… */ method is standardised in CSS, it is guaranteed to work on all browsers, but the double-slash method is not.Yes, some contemporary browsers might support it. However, these browsers could stop supporting this functionality at any point, which would leave your visitors perplexed, your comments inoperable, and your CSS broken.

To be safe, stick with the /*… */ commenting technique that we’ve been talking about because it’s the accepted practise, is compatible with all current browsers and operating systems, and won’t be discontinued anytime soon.

How to add CSS to a Web page

Difference between CSS Comments and HTML Comments

You also may have noticed that CSS comments work similarly to HTML comments. The difference between them is that CSS comments are designated with the symbols /* … */, whereas HTML comments are enclosed in <!– … –> tags.

//HTML comment
<!--This is my paragraph -->
<!--<p>Codeshruta</p>-->

//CSS Comment 
/* Style of p tag */
p{
/*color : black;*/
}

Why Making Comments in CSS?

Use comments to add clarification or to stop the browser from rendering particular sections of your style sheet.

The interpretation of other portions of your stylesheet or the front-end design of your website will not be affected by comments. In addition, they’re simple to make, even if you’re just learning HTML and CSS.

Conclusion

When it comes to remembering what you were doing when you wrote the CSS, adding comments can be helpful.It’s also simpler to start working on a project if it’s been a while since you last looked at the code when comments are included correctly. I hope this blog provides you with some value if you have any questions or problems. Don’t forget to comment below.

Thankyou for reading!

Written by : Vipin