CSS from zero: a value has a type

CSS checks the type of a value against the property. color wants a color. padding wants a length. opacity wants a number. A length in the color slot is not a clever conversion. The declaration is invalid, and the property keeps whatever value it had.

The property chooses the type#

A CSS declaration is a property and a value, and the property decides which type of value is legal. color accepts a color. padding accepts a length, so a bare number is dropped. opacity accepts a number from 0 to 1. An illegal value does not crash the page. The browser discards that one declaration and keeps the previous value of the property. When a rule seems ignored, the type is the first thing to check. The tools mark the declaration as invalid.

1. colorcolor#12342c
2. paddinglength16px
3. opacitynumber1

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

Three properties, three types#

#12342c is a color, written as red, green, and blue in hex. 16px is a length: 16 pixels. 1 is a number, and for opacity it means fully visible. 0 would mean fully transparent. The property name tells you which type belongs there.

color: 16px does nothing useful. The browser drops that declaration. padding: #12342c is dropped the same way. When a rule seems to be ignored, look at the type first. The developer tools mark an invalid declaration. The next lesson uses a class so those three declarations travel together.

The class name is not the type#

.price is a selector. It chooses the elements that receive the declarations. The types live in the values, on the right-hand side. An element with class="price" gets all three. An element without it does not, even if it is also a box on the page.