CSS syntax, and why CSS fails silently

CSS has a small grammar you can learn in ten minutes. What takes longer is getting used to how it behaves when you get it wrong — because it does not tell you.

The parts of a rule

p {
  color: dimgray;
  font-size: 18px;
}

• Selector — p. Which elements this applies to.
• Declaration block — everything between { and }.
• Declaration — color: dimgray;. One property and one value.
• Property — color. What you are changing.
• Value — dimgray. What you are changing it to.

A colon separates property from value. A semicolon ends the declaration. The braces wrap the block.

The final semicolon before } is technically optional:

p {
  color: dimgray;
  font-size: 18px
}

Valid — but leave it in. The day you add another declaration underneath and forget to add the semicolon to the line above, you will lose ten minutes to a rule that silently stops working.

Whitespace is free

CSS does not care about line breaks or indentation:

p{color:dimgray;font-size:18px}

Identical to the version above. Write it the readable way — one declaration per line, indented — because you will read it far more often than you write it.

Selectors and properties are case-insensitive, but values sometimes are not. COLOR: RED works. A file called Style.css referenced as style.css will not be found on a real web server, even though it works on your Windows machine.

Comments

/* Brand colours, from the printed menu */
h1 {
  color: darkgreen;
}

/* */ only. There is no // in CSS — write it and you break the rule it is in.

Comments are most useful for switching a declaration off while you test:

p {
  color: dimgray;
  /* font-size: 18px; */
}

The font size is now inactive without being deleted. This is how you find out which declaration is causing something.

They cannot nest. A */ inside a comment ends it early, and the rest of your CSS spills out as broken syntax.

Nothing happens, and nothing is said

Here is the part worth spending real time on.

Write nonsense in JavaScript and it throws an error. Write nonsense in CSS and the browser shrugs, discards that line, and carries on with the rest. No message, no warning, nothing in the console.

A misspelled property does nothing:

p {
  colour: dimgray;
}

colour is not a CSS property. color is. The paragraph stays its default colour, and nothing anywhere says why.

An invalid value does nothing:

p {
  font-size: 18;
}

18 is not a length. CSS wants 18px, 1.2rem, 120% — a number with a unit. Bare 18 is thrown away.

That one is worth memorising, because it is the most common CSS mistake there is: numbers need units. The exception is zero, where margin: 0 is fine, and a few unitless properties like line-height: 1.5 and opacity: 0.6.

A missing brace breaks everything after it:

h1 {
  color: darkgreen;

p {
  color: dimgray;
}

The h1 rule was never closed, so the browser reads on looking for the } and swallows the p rule into it. Both rules are lost. This is why a single typo can appear to break "all my CSS below this point" — and why, when a whole section of your stylesheet stops working, you should look above the first thing that broke, not at it.

Finding what was thrown away

The browser does record what it discarded — it just does not volunteer it.

Right-click the element, choose Inspect, and look at the Styles panel. Every rule matching that element is listed, and a declaration the browser rejected is shown struck through, usually with a warning triangle.

That strike-through is the error message CSS never gave you. It tells you apart, instantly, the two cases that otherwise feel identical:

• The declaration is there but struck through — your CSS reached the element and was invalid. A typo in the property or the value.
• The declaration is not there at all — your selector never matched, or the stylesheet never loaded.

Two different problems, two different fixes, and without the Styles panel they look exactly the same from the outside: nothing happened.

Make this your first move whenever CSS does not work. Not retyping the property. Not adding !important. Inspect, and look at what the browser actually kept.

Several selectors, one block

A comma applies one block to several selectors:

h1, h2, h3 {
  font-family: Georgia, serif;
  color: darkgreen;
}

Three rules' worth of styling, written once.

There is a trap here worth knowing early: if one selector in a comma-separated list is invalid, the browser discards the entire list, including the valid ones. One unrecognised selector and all three headings lose their styling. It is the one place where CSS's silent failure spreads beyond the line it is on.

Reading a real stylesheet

/* Lahore Canteen — site styles */

body {
  font-family: system-ui, sans-serif;
  color: #222;
  margin: 40px;
}

h1 {
  color: darkgreen;
  font-size: 32px;
}

.price {
  font-weight: bold;
  color: crimson;
}

Three rules. The first targets an element and sets three declarations. The second targets another element. The third targets a class — the dot means class, which is the next lesson.

Everything you write from here is that same shape repeated: choose elements, set properties. The rest of this track is which properties exist and how to choose elements precisely.

Next: selectors — how to target exactly the elements you mean, and why writing class=".btn" in your HTML quietly stops everything working. If the browser defaults in this lesson were new, see what CSS is.