# Exercise: Why Won't It Change?

Find out why five of a bike shop's styles lose, fix each one without !important, and write one line saying why it lost, until every test passes.

Apprentice · CSS · Updated October 30, 2026

Spoke & Chain, a neighborhood bike shop on Elm Street, has a home page, and the owner keeps hearing the same thing from the person who edits it: "I changed it and nothing happened." The prices are meant to be green and they're gray. The **Book a tune-up** button is meant to be orange. The sale banner is meant to be red. The stylesheet says one thing and the page shows another, five times over. Your job is to find out why each style loses, fix it the honest way, with no `!important`, and leave a one-line note so the next person understands. Tests tell you when each fix is right.

## Before you start

You need VS Code with Live Server, a browser and Node.js, which the lesson *Setup: VS Code, a Browser and Node.js* installs. Nothing from earlier exercises is needed: the bike shop's page and stylesheet are in the exercise code.

## Get the exercise code

In the **Exercise** box beside the lesson, choose **Get the starter on GitHub** to open its GitHub repository. Click **Code**, then **Download ZIP**, and unzip it into your practice folder.

The folder holds:

- `index.html`: Spoke & Chain's home page. One of the five problems is in this file.
- `styles.css`: the shop's stylesheet, with the other four problems, and a comment at the top for your notes.
- `page.test.js`: the tests that check your page. You don't need to change this file.
- `package.json` and `.gitignore`: ready to use. They tell `npm` which checking tool the tests need.
- `README.md`: the same instructions as this lesson, in short.

Open the folder in VS Code (**File > Open Folder**).

## What to do

Open `index.html` with Live Server and look at the page first. Then fix the files until the page has everything in this list:

1. **Prices** are green, `#2a9d8f`, and the brand names beside them stay gray, `#6c757d`.
2. **The Book a tune-up button** is orange, `#f4a261`.
3. **Every product card** has a 2-pixel light gray border, `2px solid #dee2e6`, and the list around the cards has none.
4. **The sale title** is white, `#ffffff`.
5. **The sale banner** is red, `#e63946`.

Each of the five loses for a different reason. Find the reason before you change anything: the reason tells you the fix. Then write it in the comment at the top of `styles.css`, which looks like this in the starter:

```css
/*
  Why each style lost. When you fix one, replace its ? with one line that says why it lost.
  1) Prices: ?
  2) Book a tune-up button: ?
  3) Product card borders: ?
  4) Sale title: ?
  5) Sale banner background: ?
*/
```

Three rules hold the whole time: no `!important`, no `style` attributes in `index.html`, and the page's classes and ids stay as they are.

## Check your work

Open VS Code's terminal (**Terminal > New Terminal**). The first time only, download the checking tool:

```bash
npm install
```

Then run the tests:

```bash
npm test
```

At first 6 of the 8 tests fail. That's expected. The two that pass check that the page still links `styles.css` and that there's no `!important`, and they must stay green. When a test fails, its message says what it found and what it expected, such as *The button's background is rgb(173, 181, 189), not orange (rgb(244, 162, 97))*. The browser writes every color as `rgb()`, so `#f4a261` shows up as `rgb(244, 162, 97)`.

## Hints

- **Inspect first.** Right-click the element, choose **Inspect**, and find the property in the **Styles** pane (Firefox: **Rules**). *The Cascade: How the Browser Picks a Winner* shows what a crossed-out declaration means, and what a warning icon beside one means.
- **Name the round.** For each style, ask which round of the cascade it lost: where the rule came from, `!important`, specificity or source order. Or did it never enter the contest at all?
- **Score the selectors.** In Chrome and Edge, hover over two selectors to see their scores, and compare them column by column, as in *Specificity: Scoring a Selector*. Then ask what the stronger rule was really meant for.
- **Does it pass down?** A comment in the stylesheet promises something "for every product card". *Inheritance: What Children Get from Their Parents* says which properties reach the elements inside, and which don't.
- **Look in the HTML too.** One winner isn't in the stylesheet at all.
- **One fix at a time.** Fix one, save, run `npm test`, and see which test has turned green.

## When you're done

Every test has a green check mark beside it, from *the page still links styles.css* to *a note for each fix says why the style lost*, and the summary at the end of the run says:

```text
ℹ tests 8
ℹ suites 0
ℹ pass 8
ℹ fail 0
```

The prices are green beside gray brand names, the button is orange, each bike sits in its own bordered card, and the white sale title stands out on a red banner. Read your five notes again. Which fix made a rule weaker instead of making yours stronger, and why does that make the next change easier?

## So what

Every stylesheet that has been edited by more than one person has styles like these. Finding which round a style lost, fixing the cause and leaving a note is how you keep a site quick to change, instead of one where every fix needs `!important`.

## Key terms

- [Cascade](https://www.ask-codey.com/glossary/cascade)
- [Specificity](https://www.ask-codey.com/glossary/specificity)
- [Source order](https://www.ask-codey.com/glossary/source-order)
- [Inheritance](https://www.ask-codey.com/glossary/inheritance-css)
- [Inline style](https://www.ask-codey.com/glossary/inline-style)
- [!important](https://www.ask-codey.com/glossary/important)

## Related

- [The Cascade: How the Browser Picks a Winner](https://www.ask-codey.com/lessons/css-cascade)
- [Specificity: Scoring a Selector](https://www.ask-codey.com/lessons/css-specificity)
- [Inheritance: What Children Get from Their Parents](https://www.ask-codey.com/lessons/css-inheritance)

Source: https://www.ask-codey.com/lessons/exercise-css-why-wont-it-change