Comments - CSS - Simple Dev

Summary

Syntax:

/*  */

Single line comment:

/* A comment in CSS */

Multi-line comment:

/* 
  A multi-line comment
 in CSS 
*/

Details

Comments in code allow you to write notes to yourself about the code you’ve written. The text inside a comment will not show up on the actual web page or affect the styles in any way.

A comment in CSS starts with a forward slash and an asterisk.

/*

Then you write the text you want in the comment.

/* A comment in CSS

You close the comment using an asterisk and then a forward slash (the opposite of how it starts).

/* A comment in CSS */

As you can see from the examples above, comments can span a single line or multiple lines.

Using comments to disable code

Comments can also be used to temporarily disable sections of code, so you can see what your web page looks like without a particular set of styles. Here’s an example:

/* p {
  color: red;
} */

If you decide that you don’t need the code that you’ve commented out, it’s best to delete the code rather than leave it in so you don’t end up with a bunch of commented out code in your CSS file.

VS Code Tip

To quickly create a comment in VS Code, press Ctrl + / on Windows or Cmd + / on macOS. This will create a new comment on a blank line or comment out the line your cursor is on if there is already code on it.

Exercises

First, recreate the CSS comment in the Summary. Then try commenting out the CSS code in main.css. Check the web page in the browser to make sure the style has been disabled.

References

CSS Comments on MDN

Comments – CSS