CSS Comments

You can already write rules and attach a stylesheet. Sometimes you need a note for yourself — or a way to turn a style off while you test — without deleting the code. CSS comments give you that.

What are CSS comments?

CSS comments are notes written between /* and */. The browser ignores them when it applies styles. Use them for short reminders, section labels in a stylesheet, or temporarily disabling a rule while you experiment.

Comment syntax

Write a comment like this: /* your note here */. Everything from the opening /* to the closing */ is ignored by the CSS engine. Visitors do not see comments as page text — comments live in the stylesheet source (and in DevTools if you open the file).

Why short notes help

A one-line comment above a rule can explain why a value exists (brand color, temporary fix, accessibility choice). Prefer short notes over essays — your future self only needs a hint.

Multi-line comments

Comments can span several lines. A common pattern is a small “section banner” before a group of related rules so a long stylesheet stays scannable.

Keep multi-line blocks short. Huge commented essays make the file harder to read than no comments at all.

Temporarily disable a rule

You can wrap a declaration — or a whole rule — in a comment to turn it off without deleting it. Later, remove the markers to bring the style back. This is handy while debugging which property causes a layout bug.

Safe testing habit

Comment out the smallest piece that helps you learn (one declaration first). If the page looks right again, you found the suspect. Then either fix the value or delete the dead code — do not leave giant disabled blocks in a finished stylesheet forever.

Not the same as HTML comments

HTML comments use <!-- and -->. CSS comments use /* and */. Do not paste HTML comment markers into a .css file (or inside a <style> block expecting HTML rules). Each language has its own comment syntax. If you studied HTML comments earlier, treat this as a parallel skill with different markers.

Comments are not security

Anyone who can open the stylesheet (or View Source / Network) can read your comments. Never put passwords, private keys, or secret tokens in CSS comments. Comments are for development notes, not for hiding sensitive data.

Try it yourself

1. Open a practice stylesheet (or a <style> block) with a .hero rule that sets color and font-size.
2. Add a single-line comment above the rule explaining the color choice.
3. Wrap the font-size declaration in /* … */, save, and refresh — the size should fall back while color still applies.
4. Remove the comment markers around font-size and refresh again to restore it.
5. Optionally add a short multi-line section comment above the rule group.

Common mistakes

• Using HTML markers (<!-- -->) inside CSS — the CSS engine will not treat them as comments
• Forgetting the closing */ so the rest of the stylesheet is ignored
• Trying to nest comments (/* outer /* inner */ still broken */) — CSS comments do not nest cleanly
• Leaving huge commented-out rule dumps in production files for months
• Putting secrets or private URLs in comments

Summary

• CSS comments use /* and */
• The browser ignores comment text when applying styles
• Use short notes, section labels, or temporary disable while testing
• HTML uses <!-- -->; do not mix that syntax into CSS
• Comments are visible in source — never store secrets there