Comments and Style

Comments

CSS has one kind of comment, which can span lines:

/* ==========================================================
   Buttons
   ========================================================== */

.button {
  padding: 0.5rem 1rem;
  /* Match the input height so buttons line up in forms. */
  line-height: 1.5;
}

/* .button--legacy { ... }  Remove after the 2027 redesign. */

• Comments start with /* and end with */; they can't be nested.
• // is not a comment in CSS. It usually breaks the following rule or declaration (it works in Sass, which confuses people).
• Explain why, not what: /* Safari needs this for sticky headers */ is useful; /* make it red */ next to color: red isn't.
• Comments ship to the browser unless your build removes them — minifiers do.

A consistent style

• One declaration per line, a space after the colon, a semicolon after every declaration.
• Two-space indentation; a blank line between rules.
• Lowercase, hyphenated class names: .product-card, not .ProductCard or .product_card (unless your naming convention says otherwise — Level 3 covers BEM).
• Lowercase hex colors, and the shortest clear form.
• Group related rules, and order the stylesheet from general to specific: reset → base elements → layout → components → utilities.
• Avoid ids and !important in selectors.
• Prefer rem for sizes and unitless line-height.

Let Prettier handle formatting and Stylelint catch mistakes.

A starter stylesheet

Combining what you've learned:

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #1f2328;
  background: #ffffff;
}

img, svg, video { max-width: 100%; height: auto; }

input, button, select, textarea { font: inherit; }

h1, h2, h3 { line-height: 1.2; text-wrap: balance; }

.container { max-width: 70rem; margin-inline: auto; padding-inline: 1rem; }

:focus-visible { outline: 3px solid #f5a623; outline-offset: 2px; }

What's next

You now know the core of CSS. Try the Beginner Projects, then continue to Level 2 — Intermediate, which starts with specificity in depth.