topMutt,

I'm not sure what you want the styles to be, but (as an example) just edit your "styles.css" file and look for :

/*
 * General styles:
 */
a,
a:visited {
	color: #CC0000;
	text-decoration:none;
}
a:hover {
	color: #cc0000;
	text-decoration:underline;
}

While it's not necessary, I generally like to keep all the CSS controlling links TOGETHER, so I know where to modify something in the future. So ... just below that add :

.bTitle a,a:visited {
  color:blue;
  background-color:inherit;
}
.bTitle a:hover {
  color:red;
  background-color:inherit;
  text-decoration:none; 
}

This will change your black background titles (that have links) to be blue, until hovered, when they turn RED. (And turns OFF the underline).

Notes:

(1) Whenever you put "color" in your CSS, you should get into the habit of designating a "background-color" (even if it's "INHERIT"ed from a parent element). This is considered 'good form" for accessibility, providing some level of assurance that the background color and foreground color don't render the material "unreadable".

(2) the above code assumes that you don't want to distinguish if a link has already been visited. If you did, you would want to separate the "a,a:visited" into two separate selectors and style them differently.

(3) To "hook up" things up in CSS ... you just specify all the things that have to "match" for certain styling to take effect. So by putting the .bTitle selector in front of a, a:hover or a:visited ... you're saying "Apply the following styles to ANY a, a:hover or a:visited LINKS that are contained in ANY element who has a class name of 'bTitle'). To be more specific, you could've said ... div.bTitle (which would limit it to only DIVS which have the class name "bTitle").

Hope this helps.

Yes, that helps perfectly! And I learned something. B)

I am curious about one thing, there is this section h3.bTitle {...}, could that also be written as .bTitle h3{...}? Or do you only put the a.visited (etc) after the .bTitle because it has two parts?

The h3/bTitle selectors are completely different.

h3.bTitle {} means "whenever you see an [H3 element that has a class name "bTitle"] { apply these styles to that element }.

whereas

.bTitle h3 {} means "first find [any element that has a class name "bTitle"] then IF you find an [H3 Element] inside of that { apply these styles to that H3 element }

both are "correct", but they each do different things.

I put the a, a:hover & a:visited AFTER the .bTitle because I wanted to find FIRST "any elements that had a class name "bTitle" BEFORE I started looking for any links to style.

Make sense?

Yes it does. Thanks!