How to Add and Use CSS Comments

Each website consists of elements that are structural, functional, and stylistic. Cascading Style Sheets (CSS) is used to define a website's appearance ("look and feel"). Such styles are treated separately from the HTML structure so that web standards can be easily updated and applied.

The problem with stylesheets is that stylesheets can become quite long and complicated with the size and complexity of several web pages. It's particularly true now that media queries are an essential part of the design for responsive website styles, helping to ensure that a website looks as it could be regardless of device.

These media queries alone can offer a significant amount of new styles to a CSS document, making working with it even more difficult. It's where CSS comments can be website designers and developers an essential help.

A CSS comment is used to give explanatory information on the code. You can also use it to temporarily disable some parts of CSS code. It can be quite useful when debugging or adjusting web-page formatting. Comments by design had no impact on a document's layout. The comments can't be displayed, because they are ignored by browsers. Comments explain potentially confusing functions, easily prevent blocks of code from being run, and create documentation for the code's capabilities and meaning.

The usage of comments when writing CSS code is handy for the coder and anyone who may work on it. Designers commonly use them to comment out or turn off some areas of code to see what occurs if that area is not a part of the page. There is no need to comment for every piece of code which you write. However accurate commenting can help.

Comments can be placed wherever white space is allowed within the style sheet. They can be used on a single line or span multiple lines.

Begin your comment by adding a /* and close your comment by adding a */.

The syntax is like this:

/* comment */

This syntax is used for both single and multiline comments. Now let’s see an example where comments are used.

Example of adding a CSS comment:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        line-height: 2em;/*1em = 16px */
      }
    </style>
  </head>
  <body>
    <p>Some paragraph.</p>
    <p>This paragraph is written with 2em line-height.</p>
  </body>
</html>

Properly-formatted comments can describe important aspects of the stylesheet to participants of a company who might not be familiar with the code previously. These comments are also very useful for people who've worked on the website earlier, however, haven't worked lately; web designers usually work on various websites, and remembering design techniques from one to the following is hard.

Many designers are breaking out sections and coordinate stylesheets in small, easily understandable pieces that can be quickly investigated when reading. You will typically see comments preceded and followed by a series of punctuation marks creating massive, clear breaks on the page to make them easy to see. Here is an example of this:

Example of adding a CSS comment with clear breaks:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        display: block;
        width: 190px;
        height: 45px;
        /***************************
        ****************************
        This is a style for the logo.
        ****************************
        ***************************/
        background: url('/build/images/w3docs-logo-black.png') no-repeat center center
      }
    </style>
  </head>
  <body>
    <h1>Comment Example</h1>
    <a href="https://www.w3docs.com/"></a>
  </body>
</html>

Or it can be like this:

Example of adding a CSS comment preceded and followed by punctuation marks:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        display: block;
        width: 190px;
        height: 45px;
       /*---------------------- Logo ------------------------*/
        background: url('/build/images/w3docs-logo-black.png') no-repeat center center
      }
    </style>
  </head>
  <body>
    <h1>Comment</h1>
    <a href="https://www.w3docs.com/"></a>
  </body>
</html>

While adding too many comments may affect the download speed and actual performance of a website, you must not hesitate to apply them. A massive reduced impact would take many lines of comments. It all comes down to balance, like so many parts of web structure.


Do you find this helpful?

Related articles