# Exercise: The Taco Truck Menu

Give Sol Taco Truck's ready-made menu page its look (a color palette, a web font for the headings, readable body text, prices and labels that stand out, and a chalkboard behind the truck's name), and let the tests check each step.

Novice · CSS · Updated October 31, 2026

Sol Taco Truck parks by the river five days a week, and its owner finally has a menu page online. The words are all there: today's special, the tacos, the burritos, the drinks and their prices. But it looks like every page with no CSS: black text in the browser's default font on plain white, with nothing to say that the truck's sign is sunset orange, that its menu is chalked on a blackboard, or that the chicken tinga is spicy. You'll give it the truck's look, using everything this chapter taught, and tests will tell you when each step is done.

The HTML is written and ready, so all of your time goes into the stylesheet.

## 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 `css-in-depth` folder.

The folder holds:

- `index.html`: the menu page. Ready to use. The only change it may need is a few link lines for a Google font, and a comment in its `<head>` marks the spot.
- `styles.css`: empty except for a comment listing the steps and the truck's brand colors. This is where your work goes.
- `images/chalkboard.webp`: a chalkboard picture for the header, in step 8.
- `page.test.js` and `package.json`: the tests and what they need. You don't need to change these.
- `README.md`: the steps and rules, the same as below.

Open the folder in VS Code, right-click `index.html` and choose **Open with Live Server**.

## What to do

Here are the parts of the page your selectors will use, as they are in `index.html`:

```html
<section id="todays-special">
  <h2>Today's Special</h2>
  <p>Pineapple al pastor tacos, three for <span class="price">$10.00</span> <span class="label new">New</span></p>
</section>

<section>
  <h2>Tacos</h2>
  <ul>
    <li>Carne asada <span class="price">$4.00</span></li>
    <li>Chicken tinga <span class="price">$3.75</span> <span class="label spicy">Spicy</span></li>
  </ul>
</section>
```

1. **The page's colors.** Give `body` a text color and a background color. Write your palette in hex codes or `hsl()`: at least three of the colors in your file. The truck's brand colors are in the comment at the top of `styles.css`, or choose your own.
2. **Readable body text.** In the same `body` rule, set a `font-family` with fallbacks that ends in a generic family; a `font-size` in `rem`, between `1rem` and `1.375rem`; and a `line-height` with no unit, between `1.3` and `1.8`.
3. **A web font for the headings.** Choose a font on Google Fonts and put its link lines in the `<head>` of `index.html`, above the `styles.css` line, or load a `.woff2` file with `@font-face`. Use it as the first `font-family` of `h1` and `h2`, with a fallback after it.
4. **Section headings.** Give `h2` a color of its own, with a type selector.
5. **Prices.** Make every price bold, with the class selector `.price`.
6. **The spicy label.** Give `.spicy` a background color and a text color, so the label stands out.
7. **Today's special.** Give `#todays-special` a background color of its own.
8. **The truck's chalkboard.** Put `images/chalkboard.webp` behind the `header` with `background-image` and `url()`, over a dark `background-color` close to the board's, such as `#2b2f2e`. Then give `header` a light text `color`, such as the cream `#fff4e0`, so the tagline reads on the board. If the truck's name is hard to read there, give `h1` a lighter color.

**Extras, if you like:** style the `.new` labels, cross out the old price on the chicken tinga burrito (it has the class `old-price`), and try `text-transform`, `letter-spacing` and `text-align` on the headings. Try `background-size: 200px` on the header, to make the chalk smudges smaller.

## Check your work

In VS Code, open a terminal (**Terminal > New Terminal**) in the exercise folder, and run this once, to download what the tests need:

```bash
npm install
```

Then run the tests, as often as you like:

```bash
npm test
```

At first, ten of the eleven tests fail: that's expected, since the stylesheet is empty. The one that passes checks that `index.html` links `styles.css`, which the starter already does. Each step you finish turns its test green. When a test fails, its message says what it checked and what to change, for example: *Give the body rule a font-size in rem, such as 1.125rem.*

## Hints

- **One step at a time.** Write one rule, save, and look at the page before you run the tests. Seeing the change is half the fun.
- **Dot or hash?** A class selector starts with a dot and an id selector with a hash, and the name after it matches the HTML exactly, capital letters included. *Type, Class and ID Selectors* has the details.
- **Shades that belong together.** Keep the hue of the brand orange and change only its lightness in `hsl()` for a darker heading color, as *Color: Names, Hex, rgb() and hsl()* shows.
- **The font's name, everywhere the same.** The name in the Google Fonts link (with `+` for spaces) or in `@font-face` must match the first name in your `font-family`. *Web Fonts: Using Any Font You Like* walks through both ways.
- **A chalkboard that doesn't show.** The path in `url()` starts from the folder `styles.css` is in, so it's `url("images/chalkboard.webp")`. The Console in the developer tools shows a red *404 (Not Found)* line with the path the browser tried, as *Pictures from CSS: Background Images* shows. Your dark `background-color` is why the words are still readable meanwhile.
- **No quotes on generic families.** `sans-serif` works; `"sans-serif"` looks for a font with that name.
- **Something didn't change?** Open the developer tools (F12, or Cmd+Option+I on a Mac) and find the rule in the Styles pane. A crossed-out or flagged declaration is one the browser skipped or another rule replaced.

## When you're done

Every test is green:

```text
✔ the page links styles.css
✔ step 1: the page has a text color and a background color
✔ step 1: the palette is written in hex or hsl()
✔ step 2: body text has a font stack that ends in a generic family
✔ step 2: body text is sized in rem, with a line-height that has no unit
✔ step 3: the h1 and h2 headings use a web font, with a fallback
✔ step 4: the section headings have a color of their own, set with a type selector
✔ step 5: every price is bold, styled by its class
✔ step 6: the spicy label stands out, styled by its class
✔ step 7: today's special has a background of its own, styled by its id
✔ step 8: the header is a chalkboard: a picture over a dark color, with words you can read
ℹ tests 11
ℹ pass 11
ℹ fail 0
```

And the page looks like the truck's own: the name in a chunky heading font on the chalkboard, the menu in warm colors on cream, bold prices, and labels you can spot from across the page. Your colors and fonts can be completely different from anyone else's, and the tests still pass.

![The finished Sol Taco Truck menu: the truck's name in a chunky orange font and the tagline in cream on a chalkboard band, over a cream page, today's special on a pale gold band, section headings in dark orange capitals, bold prices, and small red Spicy and green New labels beside the dishes](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/10/686ee8b25d5a4839a22b87bcc2e17357.webp)

Look at your labels: the words sit right against the edges of their colored backgrounds, and the tagline against the bottom of the chalkboard. That's because they have no padding yet, the space inside a box. The next chapter, *The Box Model and Units*, gives every element room to breathe.

Then look back at your stylesheet: which rules use a class, and which use an id? If the owner adds a second special tomorrow, which of your rules would still work, and which would need a change?

## So what

You've taken a plain page and given it a brand: a palette, a font that matches the sign, a chalkboard like the truck's own, and text people can read at a glance. That's the first thing anyone asks of CSS, whether it's a food truck's menu, a club's event page or a class project.

## Key terms

- [Class selector](https://www.ask-codey.com/glossary/class-selector)
- [ID selector](https://www.ask-codey.com/glossary/id-selector)
- [Hex color](https://www.ask-codey.com/glossary/hex-color)
- [Font family](https://www.ask-codey.com/glossary/font-family)
- [Line height](https://www.ask-codey.com/glossary/line-height)
- [@font-face](https://www.ask-codey.com/glossary/font-face)
- [Background image](https://www.ask-codey.com/glossary/background-image)

## Related

- [Type, Class and ID Selectors](https://www.ask-codey.com/lessons/css-selectors-type-class-id)
- [Color: Names, Hex, rgb() and hsl()](https://www.ask-codey.com/lessons/css-color-values)
- [Pictures from CSS: Background Images](https://www.ask-codey.com/lessons/css-background-images)
- [Fonts and Text: Family, Size, Weight and Spacing](https://www.ask-codey.com/lessons/css-fonts-and-text)
- [Web Fonts: Using Any Font You Like](https://www.ask-codey.com/lessons/css-web-fonts)

Source: https://www.ask-codey.com/lessons/exercise-css-taco-truck-menu