How to Insert a CSS Comment

Including comments in your CSS code is useful and highly recommended.

Young woman working with wireless technology
Aping Vision/STS/Photographer's Choice RF/Getty Images

Cascading Style Sheets (CSS) dictate the visual appearance of a website. With the size of complexity of many websites today, those style sheets can quickly become quite lengthy. This is especially true when you start adding in media queries for responsive website styles.

Adding comments to a website's CSS files is a great way to add structure to sections of that code for a human reader. It is also a wonderful tool for explaining those styles for a web professional who may have to work on the site in the future - including yourself!

In the end, smartly added CSS comments can make a style sheet easier to process. This is, indeed, important for style sheets that will be edited by teams. Comments can be used to communicate important aspects of the sheet to different members of the team who may not be familiar with the code already. These comments can also be very helpful for people who have worked on the site before if they get back into the code after being away from it for some time. I have often had to edit a website I built months or even years ago and having well formatted comments in the HTML and CSS is very welcome help!

One thing to understand about CSS comments is that they not displayed when the page renders in web browsers. Those comments are informational only. They do not affect the visual display of a site in any way and are simply present in the code itself.

Adding CSS Comments

Adding a CSS comment is quite easy.

You simply bookend your comment with the correct opening and closing comment tags:

  • Begin your comment by adding /*
  • Close your comment by adding  */

Anything that appears between these two tags will be the content of the comment. 

A CSS comment can be a single line, or it can take up multiple lines. Here's a single line example:

div#border_red {

    border: thin solid red;

    } /* red border example */

And a multiline example:

/***************************
****************************
Style for code text
****************************
***************************/

Breaking Out Sections

One of the ways I often use CSS comments is to organize my style sheet. I like to be able to easily see these sections when I peruse the file later. To do this, I often add comments with lots of hyphens in them so that they provide large, obvious breaks in the page, Here is an example.

 /*----------------------- Header Styles ------------------------------ */

"Commenting Out" Code

Comment tags can also be useful in the actual process of coding and debugging a page.  Comments can be used to "comment out" or "turn off" areas of that code to see what happens.

Because the comment tags tell the browser to ignore everything between them, you can use them to temporarily disable certain parts of CSS code. This can be handy when debugging, or when adjusting Web page formatting.

To do this, you would simply add the opening comment tag where you want the code to start being disabled and then place that ending tag where you want the disabled portion to end.

Everything between those tags will not affect the visual display of a site.

CSS Commenting Tips

Here are some tips to remember for using comments in your CSS:

  1. Comments can span multiple lines.
  2. Comments can include CSS elements that you don't want rendered by a browser, but don't want to delete completely. This is a nice way to debug a website's style sheets - just be sure to remove unused styles (as opposed to leaving them commented out) if you decide you do not need them on the website
  3. Use comments whenever you write complicated CSS to add clarification and to inform future developers, or yourself in the future, about important things they should know. This will save future development time for all involved.
  4. Comments can also include meta information like:
    • author
    • date created
    • copyright information

    Performance

    Comments can certainly be helpful, but be aware that the more comments you add to a style sheet, the heftier it will become, which will affect a site's download speed and performance. This is a real concern, but you should not hesitate to add helpful and legitimate comments for fear that performance will suffer. Find the balance between helpful comments and too many comments to get the benefits of both in your CSS documents.

    Original article by Jennifer Krynin. Edited by Jeremy Girard on 11/3/16