A shorthand property sets several related CSS properties in one declaration. It keeps styles concise, but omitted subvalues still receive their initial values and can override inherited or separately declared styles. section 1.4 section 1.4.1
Use shorthand deliberately, checking both its value order and its hidden effects:
- Treat font as especially broad: font: 32px Helvetica, Arial, sans-serif also sets font-style, font-variant, font-weight, font-stretch, and line-height to their initial values. section 1.4.1
- Read margin, padding, and related four-side shorthands clockwise: top, right, bottom, left. With fewer values, omitted sides copy from their opposite or adjacent side according to the shorthand rules. section 1.4.2
- Expect flexible ordering only when the browser can identify each value unambiguously; border: 1px solid black and border: black 1px solid are equivalent, unlike many ambiguous shorthands. section 1.4.2
A title that loses its inherited weight
Given h1 { font-weight: bold; } and .title { font: 32px Helvetica, Arial, sans-serif; }, an h1.title renders with normal weight. Expanding the shorthand reveals why: font-weight: normal is explicitly set by the shorthand, overriding the expected inherited or competing style. Use individual declarations when preserving a particular subvalue matters. section 1.4.1
font: italic bold 18px/1.2 "Helvetica", "Arial", sans-serif;
Inspect the compact font declaration to identify its style, weight, size, line-height, and family components. section 1.4
