Properties and Values
You write colour: green; and the prices stay black. No warning, no error, just nothing. CSS is forgiving in a way that hides mistakes: if the browser does not recognise a property or a value, it ignores that declaration and moves on.
The rule
Known property, valid value, or the browser quietly skips it.
Properties come from a fixed list defined by the CSS standards: color, background-color, font-size, margin, width and several hundred more. They are lower case, use hyphens between words, and use American spelling. You cannot invent one.
Values must fit the property. The common kinds are:
- Keywords: plain words the property understands, such as
bold,center,none,auto. - Lengths: a number glued to a unit, such as
16px,1.5rem,2em,50%. - Numbers with no unit, for properties that take them, such as
font-weight: 700orline-height: 1.5. - Colours, as names (
teal), hex (#0a7f5a), or functions such asrgb(10 127 90).
Two unit rules catch almost everyone:
- No space between number and unit.
16pxis a length;16 pxis invalid. - Zero needs no unit.
margin: 0is fine, but any other bare number where a length is needed, likewidth: 20, is invalid.
.dish h3 {
font-size: 1.25rem; /* length */
font-weight: 600; /* number */
text-align: center; /* keyword */
color: #1d3557; /* colour */
}The shortcut
When a style "does nothing", check three things, in order: spelling of the property, validity of the value, and the unit. Browser developer tools help: a declaration they do not understand is usually shown struck through or with a warning icon.
The rule
.dish h3 { font-size: 24 px; }, and the heading is unchanged.
Drills
Answer fast — trust the rule.
What happens to colour: green; in a stylesheet?
Which declaration is valid?
In font-weight: bold;, what kind of value is bold?
A rule has color: green; width: 20; font-weight: 700;. Which declarations apply?
Remember
- Properties come from a fixed list; values must suit the property.
- Debug in order: property spelling, value, unit.
- No space before a unit, and only zero may drop its unit.