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

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:

/*
  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:

npm install

Then run the tests:

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:

ℹ 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

Related