Comments and Basic Syntax in CSS

The Anatomy of a CSS Rule

Every CSS rule follows the same shape: a selector tells the browser which elements to style, and a block of declarations in curly braces tells it how to style them. Each declaration pairs a property with a value and ends with a semicolon.

selector {
  property: value;
  another-property: another-value;
}

For example, this rule targets every paragraph on the page and makes its text dark gray:

p {
  color: #333333;
}

Writing Comments in CSS

CSS supports only one comment style: text wrapped between /* and */. There is no single-line // comment like in JavaScript - using it will simply break the stylesheet.

/* This comment explains why the margin is negative */
.card {
  margin-top: -8px; /* pulls the card up under the header */
}

Comments can span multiple lines and are useful for explaining tricky values, leaving TODOs, or temporarily disabling a rule during debugging.

Common Syntax Mistakes to Avoid

• Forgetting the closing semicolon on the last declaration in a block - most browsers forgive this, but it is easy to break the next line by accident when editing.
• Using quotes inconsistently around font names or URLs; either single or double quotes work, but stay consistent within a project.
• Nesting a comment inside another comment, which is not supported and will end the comment early.
• Mixing up the colon (between property and value) with the semicolon (between declarations).