Change Color of Fonts in DIV (CSS)

I am trying to change the color and size of H2 font and H2 link fonts based on the div they are in but have not been successful. What am I doing wrong?

 <style> h2 { color:fff; font-size: 20px; } social.h2 { color:pink; font-size: 14px; } social.h2.h2color { color:purple; font-size: 10px; } tv.h2 { color:green; font-size: 14px; } tv.h2.h2color { color:orange; font-size: 10px; } </style> <h2>List of Companies </h2> <div> <h2> <A href="">Facebook </a> <span>Found in 2004 </span> </h2> blah blah blah <h2> <A href="">Twitter </a> <span>Found in 2007 </span> </h2> blah blah blah </div> <div> <h2> <A href="">Fox </a> <span>Found in 2004 </span> </h2> blah blah blah <h2> <A href="">NBC </a> <span>Found in 2007 </span> </h2> blah blah blah </div> 

I am trying to make it look like this:

2 Answers

Your first CSS selector—social.h2—is looking for the "social" element in the "h2", class, e.g.:

<social> 

Class selectors are proceeded with a dot (.). Also, use a space () to indicate that one element is inside of another. To find an <h2> descendant of an element in the social class, try something like:

.social h2 { color: pink; font-size: 14px; } 

To get a better understanding of CSS selectors and how they are used to reference your HTML, I suggest going through the interactive HTML and CSS tutorials from CodeAcademy. I hope that this helps point you in the right direction.

To do links, you can do

.social h2 a:link { color: pink; font-size: 14px; } 

You can change the hover, visited, and active link styling too. Just replace "link" with what you want to style. You can learn more at the w3schools page CSS Links.