DEV Community

Max Lockwood
Max Lockwood

Posted on • Originally published at maxlockwood.dev

How to Add Comments in CSS

Why do we add comments in CSS? Code explanations are provided through comments, which may be useful if you decide to alter the source code in the future. It is important to know that Browsers don’t read comments.

The /* */ comment syntax is used for both single and multi-line comments.

Single-line comment

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

/* This is a comment in CSS */
body {
  line-height: 1.5;
  text-align: left;
}
Enter fullscreen mode Exit fullscreen mode

A single-line comment can have its own line, or it can be placed on a line with active code, as shown here:

.card h3 {
  font-size: 1.2rem;
  color: #333; /* set the text color to dark charcoal */
  margin: 15px 0;
}
Enter fullscreen mode Exit fullscreen mode

Multi-line comments

You can also format them as multi-line comments:

/*
A comment
which stretches
over several
lines
*/
Enter fullscreen mode Exit fullscreen mode

Comments can also be used to disable specific styling in your CSS stylesheets so that they won’t run:

/* The comment below is used to
   disable specific styling */
/*
h1 {
  font-size: 3rem;
  font-weight: 700;
}
*/
Enter fullscreen mode Exit fullscreen mode

You can specify the start and the end of the styles for a section of the your web page with comments:

/* Contact section starts */
.contact-wrapper {
  max-width: 700px;
  margin: 0 auto;
  background: #0b2535;
  border-radius: 5px;
  padding: 40px;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
/* Contact section ends */
Enter fullscreen mode Exit fullscreen mode

You can also use comments to add notes to your CSS:

/* Don’t override this style. This makes images easier to work with */
Enter fullscreen mode Exit fullscreen mode

Conclusion

When it comes to remembering what you were doing when you wrote the CSS, adding comments can be helpful.

Furthermore, adding comments correctly makes it easier to start working on a project if you haven’t looked at the code in a long time.

Want to learn more about CSS? Why not check out these articles:

How do you use Cascading Style Sheets (CSS)?
What are CSS Rules and Selectors?
What are the 4 properties in a CSS Box Model?

Top comments (0)