The Café's Colors

Time for a small project! In this checkpoint, you'll style a whole page on your own, using what you've learned in the first three lessons: selectors, the cascade and inheritance, and colors.

The exercises here are a bit different from the ones so far. The instructions say what the page should look like, not how to write the CSS. There are many correct ways: you choose the selectors, which rules the declarations go in, and how to write each color. Pick the way that makes sense to you. If you get stuck, look back at the lesson where you learned what you need.

The project. Café Whiskers, a small café full of cats, has put its menu on its website, but the page is still plain black and white. Over three exercises, you'll give it the café's colors, mark the vegan and sold-out dishes, and make the prices and today's special stand out. Each exercise continues where the previous one ended: the editor starts with a finished stylesheet from the previous step, which may look different from yours. That's fine.

We've prepared the font and the spacing in style.css. The spacing uses the properties margin and padding, which you'll learn about in the lesson CSS Box Model.

The design. The café's designer has chosen these colors:

• #fdf6ec, cream: the background of the page,
• #3b2a20, dark brown: the text,
• #6f4e37, coffee brown: the background of the header and the footer, whose text is white,
• #b5651d, caramel: the headings of the menu.

The task. Color the page. When you're done, it looks like this (smaller):

A tip: remember inheritance from the lesson on selectors. You don't need a rule for every element, because the text color is inherited. Links are an exception: the browser has its own rule for them.