CSS Syntax

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Be able to read and write a CSS rule

A CSS rule mainly consists of a selector and a declaration block. The selector picks "which element to style." The declaration block, inside { ... }, uses the property: value; format to say "what to change, and how."

Forgetting the semicolon ; is an extremely common beginner mistake. Just like a full stop ends a sentence, the semicolon marks the end of a CSS declaration. Sometimes the browser will guess what you meant even without one, but don't count on it — it's best not to make the browser play fortune teller.

css

/* 'h1' is the selector */
h1 {
  /* 'color' is the property, 'blue' is the value */
  color: blue;
  font-size: 24px;
}

You should see

Every <h1> element's text color will turn blue, and the font size will become 24px.

Warning

If you get a property name wrong, the browser won't throw an error — it just quietly ignores it. For example, if you write font-szie by mistake, CSS basically shrugs and says "never heard of it" and moves right past it.