CSS Comments and Stylesheets

Comments document CSS decisions while stylesheets keep related declarations organized.

A CSS comment begins with /* and ends with */. The browser ignores the comment text; it is for people reading and maintaining the code. CSS does not use HTML comment syntax or JavaScript single-line comments.

Organize a stylesheet with useful headings such as “Typography”, “Cards”, and “Forms”. A good comment explains why a choice exists rather than merely repeating the property name.

CSS comments disappear from the visual result. They can appear between rules or within a declaration block as long as they are closed.

The explanatory comment does not display.

HTML

<p class="tip">Readable code is easier to maintain.</p>

CSS

/* Design note: reserve teal for learning tips. */
.tip { background: #ccfbf1; padding: 12px; color: #115e59; }

Rendered output

Observe: Only the padding and color declarations affect the paragraph.

Two selectors form a small component stylesheet.

HTML

<p class="card-title">Lesson notes</p><p class="card-subtitle">Updated today</p>

CSS

/* Card typography */
.card-title { color: #1e40af; font-size: 20px; font-weight: 700; }
.card-subtitle { color: #64748b; font-size: 13px; }

Rendered output

Observe: The comment labels the group, but it does not alter the displayed text.

CSS comments disappear from the visual result. They can appear between rules or within a declaration block as long as they are closed.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• CSS comments use /* ... */, not //.
• An unclosed comment can make subsequent CSS rules appear to vanish.

Write one comment explaining why your card title uses a prominent color, then confirm the output stays the same.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use comments to record intent and group rules; they do not create visible page content.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.