CSS Comment Tutorial

CSS or Cascade Style Sheets provides the comment mechanism in order to explain the CSS code, code blocks, and different implementations in a CSS code. The CSS comments are omitted by the web browsers and not interpreted as CSS code and they only used for explanation for the CSS code.

CSS Comment Syntax

The syntax of the CSS comment is like below where it starts with /* and ends with */ .

CSS_CODE
/* COMMENT */
CSS_CODE
  • CSS_CODE is the CSS code which is interpreted and executed by the web browser.
  • /* is the start of the comment.
  • */ is the end of the comment.
  • COMMENT is the comment which can be letter or number or special signs except comment start and end signs.

Single Line CSS Comment

The most popular comment type for the CSS is the single-line CSS comment. The comment consists of only a single line. These single-line comments are used to explain simple things or little code. The /* is used to set the start of the single-line comment. The */ is used to set the end of the comment. If one of the start or end of the comment specifiers missed this creates an error. In the following example, we explain the paragraph selector p and related color CSS code with a single-line CSS comment.

/* This is a single-line comment */
p {

  /* Color set as blue */
  color: blue;
}

Multiline/Block CSS Comment

In some cases we may need to create and comment multiple lines. This can be useful if there is lot things to explain or depict in a clear way. The multiline/block comments can be create by using the /* and */ signs where they wrap multiple lines. The characters between comment start and end sign are interpreter as CSS comment and not interpreted as CSS comment. the syntax of the Multiline/Block CSS comment is like below.

CSS_CODE

/* Multiline Comment
Multiline Comment
Multiline Comment */

CSS_CODE

h1 {
  color: blue;
}

/* This is a multiline comment 
   This is a block comment
   This is multiline and block comment
*/

h2 {
  color: red;
}

Inline CSS Comment

Inline comments are to explain specific CSS line after the CSS statement. Both the CSS statement and CSS comment put at the same line or inline.

p {
  color: blue; /* This is inline CSS comment */
}

Leave a Comment