5. CSS Comments

What you will learn

How to write a CSS comment
How to hide a rule temporarily
How to organise a stylesheet with comments

What is a CSS comment?

A comment is a note in your stylesheet that the browser ignores. CSS comments start with /* and end with */.

Syntax

/* This is a comment */

HTML comments () do not work inside CSS. Use /* */ in CSS.

A first example

Example

<style>
  /* Make all paragraphs blue */
  p {
    color: blue;
  }
</style>

<p>This paragraph is blue.</p>

Output

This paragraph is blue.

Comments inside a rule

You can place a comment on its own line, or after a declaration.

Example

<style>
  p {
    color: green;   /* text colour */
    font-size: 20px; /* text size */
  }
</style>

<p>Green and large.</p>

Hiding code temporarily

Wrap a declaration or a whole rule in a comment to switch it off without deleting it. This is a quick way to find which rule causes a problem.

Example

<style>
  p {
    color: red;
    /* background-color: yellow; */
  }
</style>

<p>Red text, no yellow background.</p>

Output

Red text, no yellow background.

Multi-line comments

Example

/*
  Site styles
  Author: Sam
  Last updated: 2026
*/

Organising a stylesheet

Section headings make long files easy to scan:

Example

/* ===== Header ===== */
.site-header { background: navy; }

/* ===== Footer ===== */
.site-footer { background: black; }

In VS Code, select a line and press Ctrl+/ to add or remove a comment. Comments are visible to anyone who views your CSS file, so never put passwords or private notes in them.

Common mistakes

Forgetting the closing */. Everything after it is then ignored.
Using // for a comment. That is not valid in plain CSS.
Using HTML comment markers inside a stylesheet.
Leaving a lot of old, unused commented-out code in a live site.

Exercise

Use a comment to switch off the yellow background, and add a comment above the rule saying Paragraph style.

Show solution

<style>
  /* Paragraph style */
  p {
    color: purple;
    /* background-color: yellow; */
  }
</style>
<p>Hide my background.</p>

Knowledge check

1. How does a CSS comment start and end?

It starts with /* and ends with */.

2. Does // work for CSS comments?

No.

3. Why comment out a declaration?

To switch it off temporarily without deleting it.

Summary

CSS comments use /* ... */.
Use them to explain, organise, and temporarily disable code.
Browsers ignore them, but anyone can read them.