Backgrounds, Shadows, Fonts, and the Cascade
The fact that this: h1 {color: red;} h1 {color: green;} …results in green h1 text, but this: h1 {background: url(red-wave.gif) repeat, url(green-wave.gif) repeat;} …results in a red wavy h1 background does my head in every single time . And it’s the same with text and box shadows, too! In cases where backgrounds or shadows overlap, the first one you write “wins”, by virtue of being “in front of” the background images that are listed after it. I know that font stacks are also done in order of most-to-least preferred, but I don’t see them as being equivalent. The reason is that a font stack is a list of fallbacks—use this face unless it can’t render the glyph or doesn’t exist, in which case try the next one in the list, etc., etc. Multiple background images and multiple shadows, on the other hand, are not a series of fallbacks… Read the rest here