🎓 A1Learner
🔍

CSS Comments

A CSS comment is a note written between /* and */. The browser ignores comments when it reads a stylesheet.

A comment above a rule

The comment explains the rule below it. The rule still works as normal.

/* Colour the heading */
h1 {
  color: blue;
}

A rule switched off

The whole rule sits inside a comment here. The heading keeps its default colour, which is black.

/*
h1 {
  color: blue;
}
*/

A comment inside a rule

A comment can sit between declarations. The later colour still wins here.

h1 {
  color: red;
  /* The next line wins */
  color: blue;
}

Example

/* Practice page colours */
h1 {
  color: blue;
}
p {
  color: green;
}
/*
ul {
  color: red;
}
*/

Key points

  • Comment: a note between /* and */ that the browser ignores
  • Use a comment to explain code or to switch a rule off.
  • Comments do not nest inside each other.
  • HTML comments use <!-- --> and belong to HTML.
  • A comment can sit anywhere whitespace can sit.

In this example, a comment labels the stylesheet at the top. The h1 rule colours the heading blue. The p rule colours every paragraph green. The ul rule sits inside a comment, so the list keeps its default colour.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

What happens to a rule wrapped in /* and */?