Exercise Tuesday

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

Warm Up

Go to CSS Diner and with your partner, ping pong through the levels. You will have the keyboard for one level and then switch with your partner for the next.

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 9 of 26
Last updated October 11, 2020