# Your First CSS Rule

Write your first CSS rules on a coffee shop's menu, learn the name of every part (selector, declaration, property and value), and see what the browser does with a typo.

Novice · CSS · Web Development · Updated November 1, 2026

## After this lesson you can

- Name the parts of a CSS rule: selector, declaration, property and value
- Write a CSS rule with a selector and declarations, using curly braces, colons and semicolons correctly
- Explain what the browser does with a CSS declaration it can't read

## Key takeaways

- A CSS rule says which elements to style (the selector) and how to style them (the declarations, between curly braces).
- Each declaration is a property, a colon, a value and a semicolon, such as color: saddlebrown;
- A selector that starts with a dot, such as .price, picks every element marked with that class.
- The browser skips a declaration it can't read, without any error message, and keeps going with the rest.

The coffee shop's owner wants the menu on a warm cream background, with the heading in the shop's brown. A class assignment says "make every heading dark green". A teammate asks you to make the prices bold. Each of those is one CSS rule, a few lines long, and once you know the shape of one rule you can read every stylesheet ever written. In this lesson you write your first rules on The Daily Grind's menu from *Setup: VS Code, a Browser and Node.js*.

## A rule is an instruction with a target

Picture a note left for the person who paints the coffee shop's signs: "Every price tag: bold, coffee brown." It says **who** the instruction is for (every price tag) and **what to change** about them (bold, coffee brown).

A **CSS rule** is that note, written for the browser. It names which elements on the page it's for, then lists what to change about them and what to change it to. The browser reads every rule in the stylesheet and applies each one to the elements it names.

## The shape of a rule

Every CSS rule has this shape:

```css
selector {
  property: value;
}
```

Read it aloud the way you'd read it to someone over the phone:

- `{` is an **opening curly brace**, and `}` a **closing curly brace**. Everything between them is the list of changes for that selector.
- `:` is a **colon**. Read it as "is": `color: saddlebrown` reads "color is saddle brown".
- `;` is a **semicolon**. It ends one instruction, the way a period ends a sentence.

The spaces and line breaks are for people. The browser would read `h1{color:saddlebrown;}` the same way, but one declaration per line, indented, is far easier to read and fix.

## The name of every part

Here is a real rule, for the menu's main heading:

```css
h1 {
  color: saddlebrown;
  font-family: Georgia, serif;
}
```

| Part | In this rule | What it is |
|---|---|---|
| **Selector** | `h1` | Which elements the rule is for. `h1` picks the page's main heading (the HTML marks it with `<h1>`). |
| **Declaration block** | everything from `{` to `}` | The list of changes. |
| **Declaration** | `color: saddlebrown;` | One change: a property, a colon, a value, a semicolon. This rule has two. |
| **Property** | `color`, `font-family` | What you're changing. `color` is the text color; `font-family` is the font. |
| **Value** | `saddlebrown`, `Georgia, serif` | What you're changing it to. `Georgia, serif` means "Georgia, or any serif font if Georgia is missing". |

The whole thing, selector and block together, is the **rule**. A **stylesheet** is a file full of them.

## Style The Daily Grind's menu

Open your `daily-grind` folder in VS Code, open the menu with Live Server, and put the editor and browser side by side. Your `styles.css` has the `body` rule from setup. Add the `h1` rule under it, and give the body a text color too:

```css
body {
  background-color: linen;
  color: darkslategray;
}

h1 {
  color: saddlebrown;
  font-family: Georgia, serif;
}
```

Save. The page stays its warm off-white, the text turns dark slate gray (a deep gray with a hint of green) instead of black, and *The Daily Grind* at the top becomes a reddish brown in Georgia. Only the main heading changed: `Coffee`, `Bakery` and `Today's special` are `<h2>` headings, which the `h1` selector doesn't pick.

`linen`, `darkslategray` and `saddlebrown` are color names: CSS knows about 150 of them. Real brands use exact color codes instead, such as `#6f4e37` for a coffee brown, the way a paint store mixes a color from the code on its chip. You'll learn to read those codes in the chapter *Selectors, Color and Text*.

**Try it.** Add a rule for `h2` that makes the three section headings `saddlebrown` too. Save, and check that all four headings now match.

## Picking the prices: a class selector

The prices aren't headings or paragraphs: in the HTML, each one is marked `class="price"`. A **class** is a label you put on elements so CSS can find them, and a selector for a class starts with a dot. `.price` is read "dot price", and it picks every element labeled `class="price"`.

```css
.price {
  font-weight: bold;
  color: saddlebrown;
}
```

Save, and all six prices turn bold and brown at once, the five on the menu and the one in Today's special. One rule, every element with the label: that's why classes exist. The chapter *The HTML You Need* shows how to put classes on your own pages.

## When you make a typo

Everybody mistypes CSS, and the browser's reaction surprises most people: it says nothing at all. A declaration it can't read is skipped, and the rest of the rule still works. Here `color` is misspelled:

```css
h1 {
  colr: saddlebrown;
  font-family: Georgia, serif;
}
```

The heading keeps its Georgia font but turns back to the body's dark gray, with no error message on the page. A misspelled value, such as `saddlebrwn`, is skipped the same way. A missing semicolon costs more:

```css
h1 {
  color: saddlebrown
  font-family: Georgia, serif;
}
```

Without the semicolon, the browser reads everything up to the next one as a single declaration: `color` with the value `saddlebrown font-family: Georgia, serif`. That's not a color, so it's skipped, and the heading loses both its color and its font. When a style doesn't show up, look for a spelling mistake or a missing colon or semicolon first. VS Code helps a little: it puts a wavy underline under a misspelled property or a missing colon or semicolon, but not under a misspelled color name. The next lesson, *Look Inside Any Page with Developer Tools*, shows you where the browser points out the declarations it skipped.

**Try it.** In your `h1` rule, delete the semicolon after `saddlebrown` and save. Watch the heading lose its color and font. Put the semicolon back, save, and watch them return.

## Check yourself

2 questions to try on the lesson page.

## So what

Every stylesheet you will ever read, from a coffee shop's to a giant online store's, is made of rules with this one shape: a selector, then declarations of a property and a value. You can now read and write them.

## Key terms

- [CSS rule](https://www.ask-codey.com/glossary/css-rule)
- [Selector](https://www.ask-codey.com/glossary/selector)
- [Declaration](https://www.ask-codey.com/glossary/declaration-css)
- [Property](https://www.ask-codey.com/glossary/property-css-2)
- [Value](https://www.ask-codey.com/glossary/value)
- [Declaration block](https://www.ask-codey.com/glossary/declaration-block)

## Cheat sheets

- [Your First CSS Rule](https://www.ask-codey.com/cheat-sheets/css-your-first-rule-cheat-sheet)

Source: https://www.ask-codey.com/lessons/css-your-first-rule