How CSS rules are written

Build a ruleset

The selector chooses elements. Declarations inside braces pair a property with a value.

h1 {
  color: #17324d;
  font-size: 2rem;
}

Format for readability

Put one declaration per line, indent consistently, and include the final semicolon. Whitespace does not usually alter meaning, but clear formatting prevents mistakes.

Write comments

Comments can document a decision or mark a section. They may span several lines.

/* Main navigation */
.site-nav {
  display: flex;
  gap: 1rem;
}

Handle invalid CSS

Browsers ignore declarations they cannot parse and continue with the rest.

• Check that braces and parentheses are balanced
• Use a colon after each property and a semicolon after each declaration
• Spell property names correctly
• Validate CSS and inspect crossed-out declarations in developer tools