What are Comments in CSS?

Comments in CSS are used to add notes, explanations, or reminders within a stylesheet. Comments are ignored by the browser and do not affect the appearance or behavior of a web page.

In this chapter, you will learn what CSS comments are, their syntax, and how to use comments in different situations.

What are Comments in CSS?

A CSS comment is a piece of text written inside a stylesheet that is ignored by the browser during rendering. Comments are used to explain CSS rules, describe sections of a stylesheet, or temporarily disable CSS code without deleting it.

Since comments are not executed by the browser, they do not affect the styling of the web page.

Syntax of CSS Comments

The following syntax is used to write comments in CSS.

/* This is a CSS comment */

In this syntax:

• /* indicates the beginning of a comment.
• */ indicates the end of a comment.
• Any text written between these symbols is treated as a comment.

Single-Line Comment

A single-line comment is used to write a short note or explanation for a CSS rule. Although CSS does not have a separate syntax specifically for single-line comments, a comment written on a single line is commonly referred to as a single-line comment.

Example

/* This is a single-line CSS comment */

Explanation

The browser ignores the comment, and it is used only for documentation or explanation.

Multi-Line Comment

A multi-line comment is used when you need to write a longer explanation that spans multiple lines. It is commonly used to document large sections of a stylesheet, explain complex CSS rules, or temporarily disable multiple CSS declarations.

Example

/* This is a multi-line
   CSS comment */

/* This is another
   multi-line comment */

Explanation

Multi-line comments are useful when writing longer descriptions or documenting multiple CSS rules.

Comments Inside CSS Rules

Comments can be placed anywhere in a CSS stylesheet, including before selectors, inside declaration blocks, or after property declarations.

Example

/* This is a comment inside a selector */
h1 {
  /* This is a comment within a property declaration */
  color: blue;
  font-size: 24px; /* This is a comment after a property */
}

/* This is a comment before a block */
/* h2 {
  color: red;
} */

Explanation

In this example:

• The first comment describes the selector.
• The second comment explains a CSS property.
• The third comment appears after a property declaration.
• The final comment disables the entire CSS rule for the h2 selector.