How to add comments in the style sheet blocks

You may need to put additional comments in your stylesheet blocks. Therefore, it is very easy to comment any part of the style sheet. You can simply put your comments inside /*...this is a comment in style sheet...*/.

You can use /* ... */ to comment multi-line blocks in a similar way you do in C and C++ programming languages.

Syntax

/* Single-line comment */

/*
   Multi-line comment
   can span multiple lines
*/

Example: Adding Comments to CSS

<!DOCTYPE html>
<html>
   <head>
      <style>
         /* Main paragraph styling */
         p {
            color: red;
            /* This is a single-line comment */
            text-align: center;
         }
         
         /* 
            This is a multi-line comment
            that explains complex styling rules
            and can span multiple lines
         */
         
         h1 {
            font-size: 24px; /* Inline comment for font size */
         }
      </style>
   </head>
   <body>
      <h1>Welcome</h1>
      <p>Hello World!</p>
   </body>
</html>

Key Points

  • CSS comments start with /* and end with */
  • Comments can be placed anywhere in CSS ? between selectors, properties, or values
  • Multi-line comments are useful for detailed explanations or temporarily disabling code blocks
  • Comments are ignored by browsers and won't affect styling

Common Use Cases

/* Section divider */
/* ================================ */
/* HEADER STYLES */
/* ================================ */

.header {
   background: blue;
   /* TODO: Change to brand color */
}

/*
.old-styles {
   display: none;
}
*/

Conclusion

CSS comments using /* */ syntax help document your stylesheets and temporarily disable code. Use them for better code organization and team collaboration.

Updated on: 2026-03-15T23:18:59+05:30

292 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements