Apply the styles by class

Muffin reviewed the current version of his website and he was pleased. He has divided the skills into three service packages: “Economy” includes the first item on the list of skills, “Standard” includes the next two items, and “VIP” includes the final two.

So, here’s a new task from the boss: Give the three groups of skills different styles so they are easy to tell apart. We can easily agree on the following division of labor: we will take responsibility for the visual design, and you can implement it technically.

First, let’s define a default appearance for all of the items in the list (left padding, border and text color), which will be the same for all service packages. (We will specify different styles for different service packages later.)

What is the best way to do this? Just like in the last step, we could add a new CSS rule with a selector for the tag li. However, that will apply to all of the list items on the page, and we only need to style the items in the list of skills. Sure, at the moment these are the only list items on the page, but we’ve learned by now that Muffin is a demanding boss and will surely want more list items on the page before too long!

How do items in a regular list differ from those in the list of skills? They differ by class! The items in the list of skills are assigned the class skills-item. That is, all we need to do is to select the tags with this class. And to do this, we use a special selector, called a class selector:

.feature-kitten {…}

A class selector starts with a period followed by a class name (with no space between them). A CSS rule for the class skills-item has already been specified in the styles, so all you need to do is add a few properties to it.