Why not to add images to <li> using css: li.class {list-style-image: url('...');} ?

@Devron Baldwin - thank you for all the great answers! I am confused on which selector to specify first within my css file. For example, should I specify ".contact-info li.phone a" or "ul.contact-info li.phone a" or even "section ul.contact-info li.phone a"? Where should I stop being more specific? I understand that I could simply do ".phone a," but as you stated it can cause bugs if two elements have the same class.

Armin Naderi - that is a good question.

This is something you'll learn naturally by experience and there isn't really a correct answer that applies to all situations. One of the main reasons CSS is so useful is that you can style a lot of elements on your page with minimal effort. If you start being too specific then you can't reuse a class on another element.

Lets look at your two examples. Firstly:

.contact-info li.phone a {
    color: #f00;
}

The CSS above will make the phone number red in all of the following cases

<div class="contact-info">
    <ul>
      <li class="phone"><a href="#something">012345689</a></li>
    </ul>
</div>


<section>
    <ul class="contact-info">
      <li class="phone"><a href="#something">012345689</a></li>
    </ul>
</section>


<nav>
    <ul class="contact-info">
      <li class="phone"><a href="#something">012345689</a></li>
    </ul>
</nav>

So the first CSS example is quite flexible. However, If we think about your second example:

section ul.contact-info li.phone a {
    color: #f00;
}

The above CSS will only make the second phone number red in the examples I gave. This might be your intention, you may wish to only make phone numbers within the section red.

You generally only want to be more specific if you want your style to be exclusive to certain parts of your web page.

Another reason to be more specific is to override less specific styles, this is a great way to avoid the dreaded !important; (which you should avoid using at all costs!)

I hope that's helpful and makes sense.

Hi Edgars Grundmanis

The reason the styling is on the anchor tag is because of the interactivity it provides. Anchor tags are unique because they interact with the mouse cursor (or the tab key) to give different "states". These states are things we can use in CSS. Other elements can do hover states but it's only anchor tags that are well supported across all the different web browsers.

An example of a hover CSS style is below:

a {
    color: #00F;
}
a:hover {
    color: #F00;
}

The code above will make all links on a site blue and when you hover over the link the text will turn red.

You can do the same with a background image, you could swap it out like so:

a {
    background-image: url(images/mybackground.png);
}
a:hover {
    background-image: url(images/myotherbackground.png);
}

This isn't the best way to do this because some browsers will load the hover image when you hover, this can give a brief moment with no background (looks bad).

Generally you use a large image that may contain one or more icons and their hover counterparts. These large images are called 'sprites'. Read this article on CSS Sprites for more information.

I hope that helps you out.