How to Insert a CSS Comment

Every website is made up of structural, functional, and stylistic elements. Cascading Style Sheets dictate the appearance (the "look and feel") of a website. These styles are kept separate from the HTML structure to allow for ease of updating and adherence to web standards.

The Problem With Stylesheets

With the size and complexity of many websites today, stylesheets can become quite lengthy and cumbersome. This problem has grown in complexity now that media queries for responsive website styles are an essential part of design, ensuring that a website looks as it should regardless of device. Those media queries alone can add a significant number of new styles to a CSS document, making it even harder to work with. Managing this complexity is where CSS comments can become an invaluable help to website designers and developers.

Comments Add Structure and Clarity

Adding comments to a website's CSS files organizes sections of that code for a human reader who reviews the document. It also ensures consistency when one web professional picks up where another leaves off, or when teams of people work on a site.

Well-formatted comments communicate important aspects of the stylesheet to members of a team who may not be familiar with the code. These comments are also helpful for people who have worked on the site before but haven't recently; web designers typically work on many sites, and remembering design strategies from one to the next is difficult.

For Professionals' Eyes Only

CSS comments are not displayed when the page renders in web browsers. Those comments are informational only, just as HTML comments are (although the syntax is different). These CSS comments do not affect the visual display of a site in any way.

Adding CSS Comments

Adding a CSS comment is quite easy. Bookend your comment with the correct opening and closing comment tags:

Begin your comment by adding /* and close it with */.

Anything that appears between these two tags is the content of the comment, visible only in the code and not rendered by the browser. 

A CSS comment can take up any number of lines. Here are two examples:

/* red border example */
 div#border_red {
 border: thin solid red;
 }

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

Breaking out Sections

Many designers organize stylesheets in small, easily digestible chunks that are easy to scan when reading. Typically, you'll see comments preceded and followed by series of hyphens that create large, obvious breaks in the page that are easy to see. Here is an example:

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

These comments indicate the start of a new section of coding.

Commenting Code

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 trick can be handy when you're debugging, or when adjusting webpage formatting. In fact, designers often use them to "comment out" or "turn off" areas of code to see what happens if that section is not a part of the page.

Add the opening comment tag before the code you'd like to comment out (disable); place the closing tag where you want the disabled portion to end. Nothing between those tags will affect the visual display of a site, helping you to debug the CSS to see where a problem is happening. You can then go in and fix just that glitch and then remove the comments from the code.

CSS Commenting Tips

Many coders include comment blocks at the top of any new file with code. Mimic that strategy by including a comment block with your name, relevant dates, and related information to help people understand the context of a project and not just decisions about what occurs relative to a specific code block.