CSS Syntax: Rules, Declarations, and Properties

CSS has a small number of syntax rules, but they are strict. A missing semicolon or a misspelled property name produces no error message — the style just silently fails to apply. Understanding the anatomy of a CSS rule makes debugging far easier.

The parts of a CSS rule

A CSS rule has two parts: a selector and a declaration block.

h1 {
  color: #2c4a1e;
  font-size: 2rem;
}

Broken down:

h1              ← selector
{               ← opening brace (start of declaration block)
  color:        ← property
  #2c4a1e;      ← value, followed by a semicolon
  font-size:    ← property
  2rem;         ← value, followed by a semicolon
}               ← closing brace (end of declaration block)

Each line inside the braces is a declaration — a property and its value, separated by a colon, ending with a semicolon.

Selectors

The selector targets the HTML elements the rule should style. The example above targets every <h1> element on the page.

In this module, you will work with the simplest selector: the type selector — an element name with no punctuation. Module 02 covers selectors in depth.

/* Type selector — targets every paragraph */
p {
  line-height: 1.6;
}

/* Type selector — targets every nav */
nav {
  background-color: #2c4a1e;
}

Properties and values

Properties are predefined names — CSS defines hundreds of them. You cannot invent your own. The value follows the colon and must be a valid value for that property.

/* Valid: color accepts hex values */
color: #2c4a1e;

/* Valid: font-size accepts rem units */
font-size: 1.1rem;

/* Invalid: typo in property name — silently ignored */
colour: #2c4a1e;

/* Invalid: wrong value type — silently ignored */
font-size: green;

There is no error thrown. The browser simply skips declarations it cannot parse.

The declaration block

The declaration block is everything between the opening { and closing }. Convention:

• One declaration per line
• Each declaration indented with two or four spaces (be consistent)
• Colon immediately after the property name, space before the value
• Semicolon at the end of every declaration — including the last one

/* Good — readable, conventional */
body {
  background-color: #f5f0eb;
  color: #1a1a1a;
  font-family: Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
}

/* Bad — works but hard to read and maintain */
body{background-color:#f5f0eb;color:#1a1a1a;font-family:Georgia,serif;}

Both versions work. The first is what professional code looks like.

Common categories of CSS properties

You have not learned most of these yet — that is fine. This is a map of what CSS can do:

Category	Common properties
Color	color, background-color, border-color
Typography	font-family, font-size, font-weight, font-style, line-height
Text	text-align, text-decoration, text-transform, letter-spacing
Spacing	margin, padding
Size	width, height, max-width
Border	border, border-radius
Layout	display, flex, gap

Each category has its own module in this course.

Common syntax mistakes

Missing semicolon. The last property in the block might work without one, but if you add a new property below it, the missing semicolon breaks both declarations.

/* Wrong — missing semicolon after color */
p {
  color: #1a1a1a
  font-size: 1rem;   ← this declaration is now broken
}

/* Correct */
p {
  color: #1a1a1a;
  font-size: 1rem;
}

Misspelled property name. CSS property names use hyphens — not underscores, not camelCase.

/* Wrong */
fontsize: 1rem;        /* should be font-size */
background_color: red; /* should be background-color */
fontFamily: Georgia;   /* should be font-family */

/* Correct */
font-size: 1rem;
background-color: red;
font-family: Georgia;

Missing braces or mismatched braces. Every selector needs its opening and closing braces.

/* Wrong — missing closing brace, breaks all rules that follow */
h1 {
  color: green;

p {
  font-size: 1rem;
}

/* Correct */
h1 {
  color: green;
}

p {
  font-size: 1rem;
}

CSS comments

Comments in CSS use /* */ syntax. They are ignored by the browser and are useful for organizing large stylesheets.

/* === Typography === */
body {
  font-family: Georgia, serif;
  font-size: 1rem;
}

/* === Navigation === */
nav {
  background-color: #2c4a1e;
}

Exercise

With your Summit Trail Outfitters styles.css connected, write three CSS rules targeting three different elements on index.html:

1. Target h1 — change the color to a dark green (#2c4a1e) and set font-size to 2.5rem.
2. Target body — set font-family to Georgia, serif and background-color to #f5f0eb.
3. Target nav — set background-color to #2c4a1e and padding to 1rem 2rem.

Save the file and refresh the browser after each addition. If a style does not appear, check for:

• Misspelled property name
• Missing colon or semicolon
• Missing closing brace from a previous rule

Recap

• A CSS rule is a selector followed by a declaration block in braces.
• Each declaration inside the block is a property-value pair ending with a semicolon.
• Property names use hyphens — not underscores or camelCase.
• CSS silently ignores invalid property names and values — there are no syntax error messages.
• Common mistakes: missing semicolons, misspelled property names, mismatched braces.
• Comments use /* */ syntax and are ignored by the browser.