CSS and HTML work together; this,BTW, is why its difficult to solve a specific questions without seeing ALL the CSS and the HTML.
Visualize it this way:
by default, block level HTML elements (in this case all but the A’s) are all transparent (essentially invisible) rectangular boxes the HEIGHT of their CONTENT and width of their CONTAINER.
CSS targets these boxes using what is call selectors ( basically ‘path’ to which boxes to apply the style rules specified within the brackets.
HTML:
so NAV is a box around the UL which is a box around ALL the LIs and the LIs are boxes around content with the A’s. As I said before, you can apply styles (color, backgrounds, etc) to each of these boxes via CSS.
CSS rules vary in specificity.
For example:
UL{ background: red; } will make the bg of all ULs red
NAV UL{ background: red; }will make the bg of ONLY ULs INSIDE NAVs red
Because boxes nest inside each other it can appear that rules give you different (or similar ) visual results even tho they TARGET different elements ( which is the take away here)
EXAMPLE:
NAV LI{ background: red; }
NAV UL{ background: red; }
Both these rules will appear to make the SAME red box with all your list items. But the differences will become apparent if you ad another style:
NAV LI{ background: red; margin:10px 0 }
NAV UL{ background: red; margin:10px 0}
This is why it’s important to learn target specific elements.
When targeting elements , there are ‘equivalent’ rules, these rules can conflict (or be useful):
LI{ background:red; }
NAV LI{ background: orange; }
UL LI{ background: pink; }
If your HTML ONLY has one list, and it is inside a NAV you might have expected the LIs to be orange, but in fact they will be pink. This is because of specificity
And that’s why you must consider your ENTIRE style sheet when creating selectors.
hope that helps