CSS Comments Tutorial for Beginners with Examples

CSS or Cascading Style Sheet is the backbone of a website that gives shape to all the elements in the browser’s frontend. Sometimes you may need to write thousands of lines in a single style sheet. In such cases, adding comments to CSS code is essential so that it can be easily understood after certain point of time. It also makes the life easy for others who try to read and modify the CSS according to their need. In this article, we will explain how to properly add comments in CSS with various examples.

Format of CSS Comments

CSS supports comments only in the following format:

/* Here is the comment */

Comment should have starting and ending declaration before and after the comment text. It can be a single line or span over multiple lines.

Example of a Single Line Comment

Single line comments are normally used to explain the change history or the original code as below:

#header h1 {
font-size: 44px;
float: left;
margin: 0;
}

Below is another example:

#header h1 {
font-size: 28px; /* Original size: 44px; */
float: left;
margin: 5px; /* Original: 0; */
}

Here, the changed style definitions are marked within comments. This is a good practice especially when you are playing with main CSS of your theme on a live site. If you make a mistake you always will have the original code to revert back.

Example of Multi Line Comments

This is the most common commenting style in CSS used to provide the explanation of the code or important usage information. Below is a practical example of multi line comments from the CSS file of a WordPress theme showing the theme details and the table of content of the CSS file.

/*
Theme Name: Twenty Fifteen
Description: Used to style the TinyMCE editor.
*/

/**
* Table of Contents:
*
* 1.0 - Body
* 2.0 - Typography
* 3.0 - Elements
* 4.0 - Alignment
* 5.0 - Caption
* 6.0 - Galleries
* 7.0 - Audio / Video
* 8.0 - RTL
*/

Using // for Single Line Comment in CSS

CSS does not support single line comment and the comment should have an opening and closing declaration. But some people still use // to mark the particular line invalid. For example, in the below code font-size will not be effective since // at the start make this declaration invalid.

.title {
//font-size: 28x;
margin: 5px;
}

But this is to make the line invalid which also can be done by adding any junk characters in front of the line. For example:

.title {
ZZZfont-size: 28x;
margin: 5px;
}

Though this will work for a single line it can’t be considered as a real single line comment. Moreover usage of // will have different effects depending on the place. For example in the below case // will comment out the entire block.

// This is invalid single line comment
.title {
font-size: 28x;
margin: 5px;
}
/* This will make the entire block declaration .title as invalid */

Points to Remember

• Comments help to explain the code and improve the readability.
• Comments are ignored by CSS parser and web browsers and not displayed on page displayed to the users.
• Nested commenting is not supported in CSS.
• Comments can be a single line or multiple lines.
• Comments can also have copyright and author information.