Front-End Web Development: The Big Nerd Ranch Guide

Your First Styling Rule

To use a class as a selector in a styling rule, you prefix the class name with a dot (period), as in .thumbnail-title. The first styles you are going to add will set the background and foreground colors for the .thumbnail-title class.

Open styles.css and add your styling rule:

.thumbnail-title {
  background: rgb(96, 125, 139);
  color: rgb(202, 238, 255);
}

You will learn more about color later in this chapter. For now, just take a look at your changes. Save styles.css and make sure browser-sync is running. If you need to restart it, the command is:

browser-sync start --server --browser "Google Chrome"
                   --files "stylesheets/*.css, *.html"

This will open your web page in Chrome (Figure 3.5).

Figure ...