How to Add and Use CSS Comments

Properly-formatted comments can describe important aspects of the stylesheet to those who might not be familiar with the code previously. 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.

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 /* and close your comment by adding */.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Syntax

/* 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>

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>

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.

Now, let's see another example.

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>

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 as 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 disable some parts of CSS code temporarily. It can be quite useful when debugging or adjusting web-page formatting. Comments by design had no impact on a document's layout. Comments can't be displayed because they are ignored by browsers. They 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 helpful for the coder and anyone who may work on it. Designers usually 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.