CSS

A CSS value has a type. A color is not a length, and a length is not a bare number. This rule sets a color, a length, and a number.

.price {
  color: #12342c;
  padding: 16px;
  opacity: 1;
}

A class is the reusable group of declarations. .price sets the color, the padding, and the opacity. You put the class on each price that should look the same.

Builds on lesson 1.

.price {
  color: #12342c;
  padding: 16px;
}

.quiet {
  opacity: 0.8;
}

16px is a length that ignores the reader's font size. 1rem follows the root font size. Use rem for type and for padding that should grow with the text.

Builds on lessons 1 through 2.

.price {
  font-size: 1rem;
  padding: 1rem;
}

Two rules with the same selector set color. The later one wins. This stylesheet ends on #0b0b0c, so that is the color of the price.

Builds on lessons 1 through 3.

.price {
  color: #12342c;
}

.price {
  color: #0b0b0c;
}

A custom property stores a value under a name you choose. --ink holds a color. color: var(--ink) uses it. Change the name once and the users follow.

Builds on lessons 1 through 4.

.price {
  --ink: #12342c;
  color: var(--ink);
}

A descendant selector styles an element inside the class. .price strong sets the weight of the price without restyling every strong on the page.

Builds on lessons 1 through 5.

.price {
  padding: 1rem;
}

.price strong {
  font-weight: 650;
}