CSS - Comments

Quiz

In CSS, comments are useful in adding explanatory notes or annotations within your stylesheet that are not interpreted as styling instructions by the web browser.

Syntax

/* This is a comment */
p {
  color: red; /* Set text color to red */
}

CSS comments are intended for the benefit of developers and are ignored by the browser when rendering a web page. They are useful in documentation, debugging, etc.

Types of CSS Comments

In CSS, there are two main ways to create comments:

Single-line Comments: Single-line comments are created using /* to start the comment and */ to end it.
Multi-line Comments: Multi-line comments allow you to add comments that span multiple lines. They are also enclosed within /* and */.

/* Single line Comment */

/*
Comment
which stretches
over multiple
lines
*/

HTML And CSS comments

In HTML tutorial we learned that, a command in HTML is defined between  symbols.

Syntax

<html>
   <head>
      <style>
         /* This is a CSS Comment */
      </style>
   </head>

   <body>
      <!-- This is an html comment format -->
   </body>
</html>

Example

Here is an example showing html comment and CSS comment format:

<html>
<head>
   <style>
      /* Target all div elements */
      div {
         background-color: red; /* Set background color */
         height: 50px; /* Set the height  */
         width: 200px; /* Set the width  */
         padding: 5px; /* Set the padding  */
         border: 5px solid black; /* Set the border  */
      }
   </style>
</head>

<body>
   <!-- This is an html comment format -->
   <div>
      Styles Applied
   </div>
</body>
</html>

Print Page