Apply the styles by class

Muffin reviewed the current version of his website and he was pleased. But then he remembered that clients often call him to ask what the rates for his training course are. And he is already tired of explaining to customers that the “Economy” service package includes the first item on the list of skills, the “Standard” service package includes the next two items, and the “VIP” service package includes the final two after that.

So, here’s a new task from the boss: Design the list of skills so that it is immediately clear which skill is included in which package. 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 (margin, border and text color), which will be the same for all service packages. (We will specify different styles for difference 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 specify the styles for the list items about the Economy plan. 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.