Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Customizing Colors and Fonts Use Classes in CSS

I am confused about the pseudo tags

Why is it that you have to declare nag a, nag a:hover twice... why does nav a:hover{} not work?? I am really confused

You're using the correct wording and not nag?

/* links */
a {
  color: blue;
}

/* nav link */
nav a, nav a:hover {
  color: red;
}

no I'm using nav... nav a, nav a:hover { ^^ why do I have to declare nav a, nav a:hover and not just nav a:hover...

Essentially you're selecting two elements and applying the same styling to them in your code here.

"nav a" is selecting the anchor elements on your navigation while "nav a:hover" is selecting them when your mouse is hovering over the link. If you are applying the same styling you will not see any chenges when you hover over the links in your navigation. Most often people style these different by bolding, underlining or changing the color of the link when a mouse hovers over it to indicate to the user that they're interacting with the web page.

Technically you don't have to declare each individually if you don't want the styling to change. However, if you DO want the styling to change you will need to declare separate styles for each scenario (regular link in the nav and links in the nav when hovered over). You would do this by splitting them up.

In the code below, all of my links would default to blue. My navigation links would then be overrwritten and show as red (only nav links). Then, when a mouse hovered over a nav link it would be red but then become bold as well.

/* links */
a {
  color: blue;
}

/* nav link */
nav a {
  color: red;
}

nav a:hover {
  font-weight: bold;
}