CSS Tutorial
CSS Comments
Comments explain a rule to the next reader. The browser ignores everything between /* and */.
What a CSS comment is
A comment is a note in the stylesheet for humans. The browser still downloads it, but it does not apply it as a rule. Use comments to explain why a value exists, mark a temporary experiment, or warn the next editor about a quirk.
CSS comments start with /* and end with */. Everything between those marks is ignored — including selectors and declarations you wrap on purpose.
Example
<style>
/* Brand color for harbor headings */
h1 {
color: teal;
}
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<p>Open 8–16. You see the heading, not the comment.</p>The /* */ syntax
Put a space after /* and before */ so the marks stay easy to spot. A comment can sit above a rule, at the end of a declaration line, or wrap several lines.
Example
<style>
h1 {
color: teal; /* matches the studio sign */
font-size: 1.75rem;
}
/*
Hours copy stays slate so it does not
compete with the heading.
*/
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<p>Open 8–16.</p>Click Try it in CSS to open /css/try. The preview paints the heading and paragraph. The comments stay in the stylesheet pane.
Turn a rule off for a moment
Wrapping a declaration or a whole rule in a comment is a fast way to test without deleting work. Unwrap it when you want the style back. Leave a short reason if the comment will survive the afternoon.
Example
<style>
h1 {
color: teal;
/* font-size: 3rem; */
}
p {
color: #475569;
}
/*
.promo {
color: #0284c7;
}
*/
</style>
<h1>Harbor studio</h1>
<p class="promo">Open 8–16. The promo color is commented out.</p>Comments do not nest
CSS has no nested comments. The first */ ends the comment, even if you meant it as an inner note. Anything after that is live CSS again. If you wrap a block that already contains/* … */, the inner closer cuts the outer comment short and leftover rules leak onto the page.
Example
<style>
h1 {
color: teal;
}
/* Outer start
p { color: navy; }
/* Inner note */
p { color: #0284c7; }
*/
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<p>Open 8–16. The inner closer ended the comment early, so the sky-blue rule ran.</p>To hide a region that already has comments, remove or rewrite the inner */ first, or comment one rule at a time. Do not stack /* inside /*.
When to comment
Comment the why, not the what. color: teal; already says the heading is teal. A useful note explains a magic number, a browser workaround, or a value that looks wrong until you know the signage spec.
| Comment | Worth it? |
|---|---|
/* heading color */ | No — the property already says that |
/* matches enamel sign on the quay */ | Yes — a reader cannot guess this |
/* 1.125rem: 18px at default root */ | Yes — if the size is a constraint |
| A whole unused stylesheet left in comments | No — delete it; git keeps history |
HTML comments use <!-- -->. Those marks do not work inside CSS. CSS comments do not work inside HTML except inside a <style> element. Keep the two syntaxes in their own files.
What not to leave in
Comments are still in the file you ship. Do not put secrets, private URLs, or rude notes about a teammate in a stylesheet. Short, kind, and current is the bar.
- Explain unusual values
- Park a rule for an hour while you test
- Do not nest comments
- Do not narrate every property
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Physics
Document g in the stylesheet
/* */ comments are for the next person. The browser skips them. Put the assumption next to the token you might otherwise “simplify” to 10.
Comments do not hide secrets. View Source still shows them.
s = ½ g t²
Example
<style>
/* g = 9.81 m/s^2 in this write-up, not 10 */
.result { color: #075985; }
</style>
<p class="result">At t = 2 s, s ≈ 19.6 m</p>Chemistry
Why the green is “neutral”, not “pretty”
Name the meaning in the comment. If a designer later changes green to teal, the comment still says this class is pH 7, not a mood.
Example
<style>
/* Neutral band at 25 °C. Not a brand colour. */
.neutral { background: #dcfce7; padding: 0.5rem; }
</style>
<p class="neutral">pH 7</p>