Is it valid to assign a value twice to the same property within one rule?

Question

Consider this:

h1 { color: red; color: blue }

Or, a more complex example (taken from a SVG file, stroke is twice):

style="fill:none;stroke:#ffffff;stroke-width:20;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke:#555555"

It seems that the answer is “it’s legal, the last assignment wins”, but I’d really like to know: Is there something written in the CSS specification about this topic?

Answer 1

It is valid to have multiple declarations that assign a value to a property so that the assignments apply to the same element, e.g.

h1 { color: red; }
h1 { color: blue }

Combining the declarations in the same rule does not change this.

There is no explicit statement about this in CSS specifications, so it is allowed simply because there is no rule that forbids it. Multiple declarations are very common, though mostly so that they are in different rules, often even in distinct style sheets. But they can also be used within a rule. A common technique is

 p { max-width: 25em; max-width: 60ch }

which means that older browsers that do not recognize the ch unit will use the setting max-width: 25em, whereas in newer browsers, the latter declaration takes effect.

A general rule in CSS is that all other things being equal, latter declaration wins; this is part of the cascade rules. In the case of h1 { color: red; color: blue }, all other things are equal. But in h1 { color: red !important; color: blue }, the first declaration would win.