CSS Tutorial / CSS Syntax: Selectors, Declarations, Comments, and Errors

A CSS rule combines a selector with declarations written as property: value; inside braces. Correct syntax helps the browser apply the intended styles, but a malformed declaration can be ignored while other valid declarations continue to work.

Read the parts of a CSS rule

.notice {
  color: #087f5b;
  padding: 16px;
}

Each property allows different values. Enter the color value in color and the length value in padding. padding: blue; cannot be used as a margin value even if the word is spelled correctly. 16px is written with numbers and units. If you use spaces like 16 px, it will not be read as a single length value.

Use braces, colons, semicolons, and whitespace

Line breaks and indentation help make code easier for humans to read. The following two rules apply the same because they have the same selector and the same declaration. When you're first learning, it's easier to find missing symbols if you break up the declarations line by line. How to select a selector according to the object to be decorated is compared in Basic CSS Selectors: Type, Class, ID, and Attributes.

.notice { color: #087f5b; padding: 16px; }

.notice {
  color: #087f5b;
  padding: 16px;
}

Although the final declaration can omit its semicolon, writing it consistently makes later additions safer. Selector whitespace can change meaning: .notice.urgent matches an element with both classes, while .notice .urgent matches an urgent descendant of a notice. Removing that space changes the selector. See MDN: Introduction.

Group selectors and write comments

h1, h2 {
  color: #087f5b;
}

/* Apply the background and border only to the notice. */
.notice {
  background-color: #e9f7ef;
  border: 1px solid #087f5b;
}

A comma links multiple selectors to the same declaration block. h1, h2 selects h1 and h2 respectively, and h1 h2 is another selector that finds h2 within h1. A comma is appropriate for the purpose of applying the same color.

CSS comments start with /* and end with */. Statements within comments are not executed in style. It can be used to write an explanation or to temporarily exclude a rule, but if the closing symbol is omitted, the code behind it may be treated as a comment. In regular CSS, JavaScript's // is not used as a single-line comment notation.

Compare declaration errors and selector errors

When a browser encounters an error in CSS, it ignores the invalid part and continues processing possible rules. This doesn’t always mean “ignore one line that’s wrong.” Missing delimiters or selector errors can have a large impact.

.notice {
  color: blue;
  padding: blue;
  background-color: #e9f7ef;
}

Only padding: blue is invalid here. Unless there are other rules, the text color and background color are applied, and the padding is not changed by this declaration. Even if the property is written incorrectly, such as colro, the declaration will not be recognized.

.notice {
  color: blue
  background-color: #e9f7ef;
  padding: 16px;
}

This block is missing a semicolon after the first declaration. The browser reads blue background-color: #e9f7ef as the value of color, which is invalid. Neither the intended color nor the intended background declaration applies, but padding: 16px; still does. Add the missing semicolon after blue.

h1, .notice:made-up-state {
  color: blue;
}

An unknown pseudo-class makes this ordinary comma-separated selector list invalid, so the rule also fails to apply to h1. Certain special selector lists use forgiving parsing. This example therefore does not describe the behavior of every selector-list context. See MDN: Error handling.

Run the complete example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1, h2 { color: #087f5b; }
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
      padding: 16px;
      border: 1px solid #087f5b;
    }
    /* Sentence describing operating hours */
    .description { font-size: 18px; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p class="notice">We open at 9 a.m. every day.</p>
  <h2>Visitor Information</h2>
  <p class="description">Bring a water bottle and comfortable shoes.</p>
</body>
</html>

If you save the entire code as index.html and open it, h1 and h2 are the same green, and the notice has a light background, 16px padding, and 1px border. Descriptive sentences appear at 18px. font-size is the property that sets the font size, line-height is the line height, and border is the border. Here it is used as an auxiliary property to link syntax and results.

Find and fix syntax errors

Replace the .notice block in the entire example with the code below. The goal is to fix two syntax errors and make it “blue text, light green background, 16px padding.” You can easily revert by copying the original file to a different name before changing it.

.notice {
  colro: blue;
  background-color #e9f7ef;
  padding: 16px;
}

Change colro to color and add a colon after background-color. Save and refresh: the notice should have blue text, a light green background, and 16px padding. The padding was already valid, so some spacing can remain even before the syntax errors are fixed.

.notice {
  color: blue;
  background-color: #e9f7ef;
  padding: 16px;
}

If your edit does not change the page, first check that you opened the correct file. Then Inspect CSS with DevTools: Styles and Computed to see which values actually apply. Distinguish syntax errors, selectors that match the wrong element, and conflicts between rules before changing more values.