Classes

A tag selector like h1 styles every element of that tag. Often you want something more precise: the prices, not every paragraph. In HTML you give elements a class with the class attribute, like <p class="price">. The same class can sit on as many elements as you like, and on any tag.

In CSS, a class selector is the class name with a dot in front. One rule then styles every element that has that class. For example, if two paragraphs on a page are <p class="note">, this rule makes both of them italic:

.note {
  font-style: italic;
}

Without the dot, note would be a tag selector, and the browser would look for <note> elements. In the shop's index.html, each price is a <p class="price">, and the Notebook and the Lamp have a small label next to their name, a <span class="badge"> ("Out of stock" and "Sale"). An empty rule selects its elements but sets nothing: the check prints (not set) until a declaration goes inside.

When you are done, the check must print:

> the style of .price (3 elements, window 1024 px wide)
  p.price "$12"
    font-weight: bold   <- .price
    color: (not set)
  p.price "$7"
    font-weight: bold   <- .price
    color: (not set)
  p.price "$29"
    font-weight: bold   <- .price
    color: (not set)
> the style of .badge (2 elements, window 1024 px wide)
  span.badge "Out of stock"
    color: #b00   <- .badge
    font-weight: (not set)
  span.badge "Sale"
    color: #b00   <- .badge
    font-weight: (not set)

Your task: in styles.css, below the body rule, add a rule for the class price that sets font-weight to bold, and a rule for the class badge that sets color to #b00.

Assignment
Follow the Coding Tutorial to add two class rules to styles.css: one that makes the three prices bold and one that makes the two badges red.

Hint
A class selector is the class name with a dot in front: .price, not price. Each declaration goes between the rule's braces: the property, a colon, the value, a semicolon.