CSS Syntax

A CSS rule has 3 parts:

css Run in compiler
selector {
  property: value;
}

• Selector — which HTML elements to style.
• Property — what aspect to change (color, font-size).
• Value — what to change it to (red, 16px).

css Run in compiler
/* Match all <h1> elements */
h1 {
  color: orange;
  font-size: 48px;
  font-family: "Inter", sans-serif;
}

/* Match elements with class="card" */
.card {
  padding: 1rem;
  background: white;
  border-radius: 8px;
}

/* Match the element with id="hero" */
#hero {
  height: 400px;
  background: linear-gradient(orange, red);
}

h1 { color: orange; }
└┬┘ └──────┬──────┘
selector  declaration block
            │
            └─ color: orange;
               └─┬─┘ └─┬──┘
            property  value
                    └ separator (semicolon)

• Missing ; between declarations — last one is forgiving but middle ones break.
• Forgetting { } — rules silently ignored.
• Wrong property name — colour (UK spelling) doesn't exist; use color.
• Unit-less values where required — font-size: 16 is invalid; use 16px.

1. Three rules — Style h1, .card, #hero differently. Hint: snippet above.
2. Multiple props — One selector, 5 properties. Hint: stacking declarations.
3. Spot the bug — h1 { color red } (no colon) — fix it. Hint: missing :.

💡 Think Like a Programmer: Selector { property: value; } — this is the only pattern in all of CSS. Master it and the rest is just vocabulary.