Skip to main content
Practice

Comment

How should you write explanations for specific CSS code or temporarily disable certain parts of it?

In such cases, you can use CSS comments.


How to Use CSS Comments​

CSS comments start with /* and end with */.

CSS
/* This is a CSS comment */
body {
  background-color: lightblue;
}

Using CSS Comments​

  1. Code Explanation: Add comments to your CSS code to explain what certain CSS properties are doing or why a particular style is needed.
CSS
/* Set main background color */
body {
  background-color: lightblue;
}

These comments are useful for collaboration with team members or when revisiting your code later.


  1. Disabling Code: If you do not want to apply certain styles temporarily, you can comment them out to disable them.
CSS
body {
  /* background-color: lightblue; Disabling background color CSS */
  font-size: 16px;
}

  1. Marking TODOs or FIXMEs: Use comments to indicate parts that need to be reviewed or fixed later. TODO is for tasks to be done later, and FIXME is for parts that need fixing.
CSS
/* TODO: Adjust font size for responsive design */
h2 {
  font-size: 24px;
}

Cautions​

  • You cannot use /* or */ inside a CSS comment.

  • While comments are not rendered by the browser, they are visible in the source code of the web page. Therefore, it is advisable not to include sensitive information in comments.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.