Skip to main content

Comments in CSS

Comments in CSS are essential for improving code readability and documentation. They help you and others understand the purpose of specific parts of your code and make maintenance easier. In this tutorial, you will learn how to write and use comments in CSS, along with sample code and simple explanations.

Writing comments in CSS​

To create a comment in CSS, enclose the text in /* */. Comments can span multiple lines and can be placed anywhere in your CSS code. They will not be displayed in the browser and do not affect the rendering of the webpage.

Example:

CSS
/* This is a single-line comment */

/*
  This is a
  multi-line
  comment
*/

Using comments in CSS​

Comments can be used in various ways to enhance the readability and maintainability of your CSS code:

  • Explain the purpose of specific styles or rules
  • Group related styles together
  • Temporarily disable specific styles or rules for testing purposes
  • Document the structure and organization of your CSS file

Example:

CSS
/* Header styles */
header {
  background-color: darkblue;
  height: 80px;
}

/* Navigation styles */
nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

nav a {
  /* Temporarily disable the color change for testing */
  /* color: white; */
  text-decoration: none;
  padding: 10px;
}

/* Main content styles */
main {
  padding: 20px;
}

In this example, comments are used to explain the purpose of specific styles, group related styles together, and temporarily disable a style for testing.

Conclusion​

In this tutorial, you learned how to write and use comments in CSS to improve code readability and documentation. With this knowledge, you can create CSS files that are easier to understand, maintain, and collaborate on, resulting in more efficient web development.