Are overriden css properties cancelled or just overriden?

I mean,

If i do:

#item { background:url('image.jpg');}

and then in another stylesheet i do

#item {background:red;}

will the browser load image.jpg and then cancell it and set red开发者_Go百科, or will go straight to red? (without loading the image)

thanks!

---

In this specific case, the browser should load the image and apply red at the same time, because those two definitions don't really overlap. It's like setting the attributes "background-color" and "background-image" individually. It makes sense as there could be a little background-image and a red background for the rest of the larger element.

In general, definitions are overridden, though, depending on what is called the specificity. Check this page for more on that http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

---

It will do both, since those two statements are the same as

#item { background: red url('image.jpg'); }

or

#item { background-color: red; }
#item { background-image: url('image.jpg'); }

In both cases, the background will have an image, and the entire area of the item element in red. So an opaque image, like a .png with transparency, would for instance be filled with red in the transparent areas as well.

However, as the script parses the CSS in a cascading fashion,

#item { background: url('image.jpg'); }
#item { background: url('anotherimage.jpg'); }

it will load "anotherimage" and ignore the other one. The request isn't sent until the CSS is done compiling and determined the order of specificity. In other words, the first image is overridden, and is therefore never requested.

The 'background' is actually a short hand property, like 'border', combining all of the different properties into a single statement. Here is a link about the 'background' property, scroll down and you can read about it.