Comments in CSS

Learn about the various types of comments in CSS.
Submitted by Shahnail Khan, on March 21, 2022

As you already know that there are three types of CSS, namely, Inline CSS, Internal or Embedded CSS, and External CSS which serve the same purpose, i.e applying CSS properties to style web pages. Suppose you want to explain your style to someone and the code is very long. Its quite difficult to make them understand, right? Well, no need to worry, you can add comments in the style CSS while coding to explain lines of code. Let's discuss how you can add comments in CSS.

What are CSS Comments?

Comments in CSS are used to define lines of code. The browser doesn't display comments. Comments only exist in source code. The comments are to be written inside <style> tag. You can either write a single-line comment or multiple lines comments.

Syntax:

/*You can write your comment here*/

Note: Comments can be added wherever you want inside the <style> element. This syntax is used to add comments in CSS only. In HTML, there's a different syntax for adding comments (Read: HTML Comments).

Example 1:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Comments in CSS</title>
   </head>
   
   <style>
      /*The p selector targets all the p elements*/
      p{
      background-color: lightgreen;
      border: 2px solid black;
      }
   </style>
   
   <body>
      <div class="container">
         <h2>Welcome to IncludeHelp</h2>
         <p>Our aim is to make you an expert in programming</p>
      </div>
   </body>
</html>

Output:

In this code, we have added a single-line comment. Here,

/*The p selector targets all the p elements */

is a comment which tells us about the selector used in CSS. As you can see in the output, the comment is not displayed by the browser.

Example 2:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Comments in CSS</title>
   </head>
   
   <style>
      ul{
      /* This selector 
      selects all
      <ul>
      elements*/
      background-color: yellow;
      border: 2px solid black;
      }
   </style>
   
   <body>
      <h2>Best CSS frameworks</h2>
      <ul>
         <li>Bootstrap</li>
         <li>Tailwind CSS</li>
         <li>Foundation</li>
      </ul>
      </div>
   </body>
</html>

Output:

In this code, we have added a multiple-line comment. Here,

/* This selector selects all <ul> elements*/

is a comment which tells us about ul selector in CSS.

CSS Tutorial & Examples »

CSS Combinators

Variables in CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples