CSS Syntax

In plain words, the rule says that every p element gets dim gray text with a font size of 18 pixels. When the browser applies it, it first finds every element that the selector matches, and then sets each declared property on each of those elements.

A rule can hold as many declarations as it needs. The button rule from the book club page sets four properties at once:

button {
  background-color: darkgreen;
  color: white;
  border: none;
  padding: 10px 20px;
}

Some values have more than one part. The value 10px 20px gives padding, the space inside the button around its text, as 10px at the top and bottom and 20px on the left and right. Chapter 4 explains these spacing values in detail.

Spaces, Line Breaks and the Last Semicolon

The browser ignores extra spaces and line breaks between the parts of a rule. These two rules are identical to the browser:

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

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

Both turn paragraphs dark green at 18px. The first one also shows that the semicolon after the last declaration is optional, because the closing brace ends the declaration anyway. However, the usual style is one declaration per line, indented, with a semicolon after every declaration, including the last one. That way, when you add a new declaration at the end, you cannot forget the semicolon in the line above it.

What Happens When a Declaration Is Wrong

The browser does not stop or show an error when it finds a mistake in CSS. Instead, it skips the part it cannot understand and applies everything else. Knowing exactly what it skips helps you find the mistake.

Consider this page, which forgets one semicolon:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Book Club</title>
  <style>
    p {
      color: dimgray
      font-size: 18px;
      background-color: lightyellow;
    }
  </style>
</head>
<body>
  <h1>Monthly Book Club</h1>
  <p>Join us on the first Friday of every month to talk about one book.</p>
</body>
</html>

The paragraph gets the light yellow background, but its text stays black and 16px. Without the semicolon, the browser reads everything from color: to the next semicolon as one declaration, so the value of color becomes dimgray font-size: 18px. That is not a valid color, so the browser drops the whole declaration, and the font size inside it is lost as well. The background-color declaration after the semicolon is read correctly.

Other mistakes are dropped in the same way, one declaration at a time:

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

Here, the paragraph text becomes 18px, but its color stays black. The browser does not know a property called colr, and it does not know a color called bleu, so it ignores both declarations and keeps the valid one between them. When a style "does nothing", inspect the element in the browser's developer tools: a declaration the browser rejected is shown crossed out, with a warning icon. The Browser Developer Tools lesson later in this chapter shows how.

Upper and Lower Case

Property names and keyword values are not case-sensitive. The browser reads this rule the same way as its lowercase version, and the paragraph turns dark green:

P {
  COLOR: DarkGreen;
}

Element names in selectors, such as P or p, are not case-sensitive in HTML pages either. Font family names are matched without regard to case too, so GEORGIA, georgia and Georgia all select the same font.

Some parts of CSS are case-sensitive, however. Class names and IDs must match the HTML exactly: the selector .Note does not match an element with class="note". File paths inside a value, such as the name of a background image, can also be case-sensitive, depending on the server that hosts the file. For these reasons, the common convention is to write all of CSS in lowercase and to copy class names exactly as they appear in the HTML.

Key Takeaways

• A rule is a selector followed by a declaration block, and each declaration inside the block is a property, a colon and a value.
• The browser applies a rule by finding every element that its selector matches and setting each declared property on those elements.
• A missing semicolon joins two declarations into one invalid declaration, and the browser drops both.
• A misspelled property or an invalid value is dropped, while the other declarations in the rule still apply.
• Properties and keywords are not case-sensitive, but class names and IDs are.