id/class question

Among previous answers, you should also remember what's called "specificity" (I cannot say that word three times fast).

The beauty of cascading style sheets is that styles are applied over one another. Because of this, browsers have been programmed to interpret which style will be most relevant to the selected element. You may have a class and an ID that are targeting the same element with conflicting styles. Which one will prevail?

In this case, the ID has a stronger specificity than a class, so it will win no matter where it's at in the cascade.

Yes, it's also important to consider whether you'll be re-using the style, in which case a class will be preferable.

And on the topic of whether it's more confusing to use classes or IDs, I think it's just important to name them clearly so that when you're looking at your CSS document, you know exactly what they are targeting.

Take a look at this useful article to learn more about specificity: https://css-tricks.com/specifics-on-css-specificity/

You COULD ID everything. However, it tends to be difficult to understand which style applies to which element if you're only using IDs.

Running with your example...

<style>
ul li a {
 color: #ff0c00;
}
</style>

<ul>
<li>
<a href="#">link</a>
</li>
</ul>

...does the same as...

<style>
#test {
 color: #ff0c00;
}
</style>

<ul>
<li>
<a href="#" id="test">link</a>
</li>
</ul>

CSS and HTML are typically broken in to at least two separate documents. If I'm only looking at the CSS, the advantage with the first approach is I know precisely what element I've modified. I can't really tell (unless the name is really intuitive) with the 2nd approach.

Of course, you could do...

<style>
ul li a#test {
 color: #ff0c00;
}
</style>
<ul>
<li> 
<a href="#" id="test">link</a>
</li>
</ul>

...but there's no real advantage to this approach unless you need to apply some unique styling to that specific link.

Hope that helps!

It depends on what you mean by put an ID for everything.

Generally you don't want to over-use IDs, because they can make reusing styles difficult. For example, if you have four different article headers and you want them all to look the same, you could select them using an h1 element. However, if you give them each IDs, then you'll need to style each one separately.

If you want to style multiple things that you can't necessarily select using elements, you can use classes. Classes are a bit like IDs, but you can associate them with more than one element.

Hopefully that helps, but let me know if you have additional questions.