CSS and Developer Tools in Chrom

[g2ktcf]

The attached image is a developers view of my wife's site. I am new to CSS and how it works. The background of the element shown has numerous struckout items and I am confused on how this works.

[lat9]

Those strike-outs indicate that the associated styling is not being used by the browser. That can occur if a style is overridden by a style that occurs later on (and therefore gets higher priority) in one of the site's stylesheets.

For the example you posted, that's just Chrome's way of letting you know that those older, pre-standardized, styles (e.g. those that start with moz-) are not used because a now-standard style has overridden them.

[g2ktcf]

inside the css file for that particular element, there are at least three different backgrounds listed. How does the browser know which one to use?

[carlwhat]

inside the css file for that particular element, there are at least three different backgrounds listed. How does the browser know which one to use?

oy! css can be very confusing....

https://www.smashingmagazine.com/200...u-should-know/

i would suggest doing a little reading...

[g2ktcf]

very helpful! I actually prefer good resources like this to simple answers (cause this answer clearly is not simple!)

[lat9]

Another good CSS resource is https://www.w3schools.com/css/default.asp