Why tags and classes together? I notice the CSS file has ".nav a" or even inverted "a.twitter". What is it for?

A class has many uses in HTML. As you can see it is a way to select elements in CSS, or in JavaScript DOM Scripting.

But there are differences in the example you have posted.

In the first 2 selectors they're simply selecting elements that have been given the class that you've specified in your CSS. These can be given to any element in your HTML document. CSS will then look for it and latch on to elements that have a given class.

e.g. .

<a class = "elementWithAClass" href="treehouse.html">

.elementWithAClass {
   //styles go here
}

In the second example, you're also selecting an element a class but also looking for an a inside that class element. So I think the differences you're talking about are merely that of CSS Specificity.

CSS Selectors have different CSS Specificity. If the elements and CSS Selectors don't match up then the styles will not take effect. You'll learn more about this though as you go on. :)

By the way, I fixed up your code so that it uses forum markdown so we can read your code better. Do have a look at the Markdown Basics course or the Markdown cheat sheet when writing post to see how to do this :)

a.twitter {}

means select any anchor tags that also have the class .twitter (an "and" situation where both have to be true). I'm guessing that you didn't see any difference when you removed the a because you don't have any other elements with the "twitter" class. The order doesn't matter here.

.nav a {}

means to select any anchor tags that are decedents of an element with a class of "nav". The order does matter here, since one item in inside another item.

So, there are other combinations but here the difference is when there is no space it is an "and" situation where both need to be true on the same element. Putting a space between the selectors defines an ancestor/decedent relationship.

Thanks for the response guys! It is much clear to me now. I just started with HTML, I guess I will have time to refine this concept as I go.

I understand that when I find a "link" <a> in HTML, I find it styled in CSS like this:

a {
  text-decoration: none;
  color: green;
}

That is telling me that any link in the CSS file is green

What is confusing to me is to see in the CSS file this:

a.twitter {
  background-image: url(images/twitter.svg);
}
a.linkedin {
  background-image: url(images/linkedin.svg);
}
a.github {
  background-image: url(images/github.svg);
}

The code above should tell me that all the links to those socials have a specific image, correct? However In the HTML sheet I do not see any class "twitter" or "Linkedin" or "Github". I just see "Social Twitter", "Social Linkedin" and "Social Github"

<li><a href="#" class="social twitter">Twitter</a></li>
        <li><a href="#" class="social linkedin">LinkedIn</a></li>
        <li><a href="#" class="social github">Github</a></li
}

Therefore, to style those elements above, shouldn't I use 3 different classes in CSS such as "a.social twitter", "a social linkedin", "a social github"?

It seems that the CSS sheet is styling those elements like this:

a.social {
  display: inline-block;
  text-indent: -9999px;
  margin-left: 5px;
  width: 30px;
  height: 30px;
  background-size: 30px 30px;
  opacity: .5;
  transition: all .25s;
}

Again, this is confusing to me because I do not see a category ".social" anywhere in the HTML sheet.

Thanks again for your time!

Thanks Dave,

I thought this would be the solution. I guess this was worth a good headache!