In CSS, you can add comments to explain or organize different sections of your stylesheet. Doing so might seem like an extraneous step in the coding process, but comments can be extremely helpful when debugging or redesigning your website

Why? Because they tell the reader what the intent of particular lines of CSS are. These insights are particularly helpful if multiple developers are working on a website or if you’ve inherited the site from another owner.

If you’ve looked through a stylesheet before or read enough blog posts with code snippets, you might have already seen comments. They’re recognizable by the  /* */ marks that enclose them.

Free Intro Guide to HTML & CSS [Download Now]

In this post, we’ll walk through how to create your own comments. Then, we’ll cover what it means to “comment out” in CSS and how to do it. Let’s get started.

You can add comments to your stylesheet in a two ways. The most common format is a single-line comment, as shown in the code below.

Here’s the CSS:

 

 

   /* Set text color to white and background color to a shade of teal */

p {

  color: white;

  background-color: #2594A4;

}

 

You can also format them as multi-line comments, as shown in the code below.

Here’s the CSS:

 

 

p {

  color: white; /* Set text color to white */

  background-color: #2594A4; /* Set background color to a shade of teal */

}

 

You can place either of these code snippets in the <head> section of your web page or in an external CSS stylesheet to style the following HTML.

Here’s the HTML:

 

 

   <h1>How to Comment in CSS</h1>

<p>This paragraph is styled with CSS. Both the font-color and background-color property have been set so the font color is white and the background color is a shade of teal. </p>

 

Here’s the result:

Code demo of paragraph styled with text and background color and with single-line comment  in CSS

Image Source

If you’re using the Bootstrap CSS framework instead of building a website from scratch, commenting still works the exact same way.

Here’s the CSS, which stays the same:

 

 

p {

  color: white; /* Set text color to white */

  background-color: #2594A4; /* Set background color to a shade of teal */

}



The HTML will be a little different, just because I want to place the heading and paragraph element in a full-width container so there’s some padding around the edges.

 

 

   <div class="container-fluid">

  <h1>Commenting in Boostrap CSS</h1>

<p>As in the example above, this paragraph is styled with CSS. Both the font-color and background-color property have been set so the font color is white and the background color is a shade of teal.</p>

</div>

 

Below is the result. Note: The only difference on the front end is the font family, which is set globally in Bootstrap.

Code demo of Bootstrap paragraph styled with text and background color and with mutli-line comment  in CSS

Image Source

How to 'Comment out' in CSS

In addition to explaining sections of code, comments can also be used to invalidate a CSS rule set or individual declarations. By placing the  /* */ marks around a rule set or declaration, you can “comment out” that CSS so the browser knows not to apply that styling.

Before we continue, let’s clarify what a rule set is. A rule set is a CSS selector and all the declarations inside the brackets. Below is a rule set for all paragraph elements on a web page (which we’ve been using in the examples above).

 

 

p {

  color: white;

  background-color: #2594A4;

}



Now let’s look at an example of an individual declaration within that rule set being commented out.

Here’s the CSS:

 

 

p {

  /* color: white; */

  background-color: #2594A4;

}



Here’s the HTML:

 

 

   <h1>How to Comment in CSS</h1>

<p>This paragraph is styled with CSS. While the font-color property has been "commented out," the background-color property has not. That means, the font color remains black but the background color changes to a nice teal. </p>

 

Here’s the result:

Code demo of paragraph with background color set and text color commented out

Image Source

Now we’ll look at an example of the entire rule set being commented out.

Here’s the CSS:

 

 

/*

p {

  color: white;

  background-color: #2594A4;

}

*/



Here’s the HTML:

 

 

   <h1>How to Comment in CSS</h1>

<p>This paragraph is styled with CSS that's been "commented out." Effectively, that means the CSS is cancelled out so the HTML appears unstyled. </p>

 

Here’s the result:

Code demo of paragraph with entire rule set of background and paragraph color commented out

Image Source

Making Comments in Your CSS

If you’d like to add explanatory notes or prevent the browser from rendering specific parts of your style sheet, then you can use comments. Comments will not affect the interpretation of other parts of your stylesheet or the layout of your website on the front end. They’re also easy to create, even if you’re just getting started learning HTML and CSS.

New Call-to-action

 css introduction

Originally published Jul 15, 2020 7:00:00 AM, updated July 15 2020

Topics:

Bootstrap CSS