Goal: Practice identifying HTML selectors for use in CSS stylesheets by playing a game called CSS Diner.

Warm Up

Go to CSS Diner and play through the levels.

Note that you'll want to select the bouncing items; not the static ones. If you need a hint, you can hover over the items on the table to see their HTML markup. Note that not all HTML here is "real" (for instance, in the first level plates are represented by <plate></plate> tags, and therefore plate is the appropriate selector).

The purpose of the game is to practice correctly selecting specific elements for use in CSS stylesheets. Understanding how to target specific elements in your HTML will also help you to traverse DOM elements when we get to JavaScript.

Lesson 42 of 53
Last updated October 12, 2021