Change Color of Fonts in DIV (CSS)

Question

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 class="social">   <h2>     <A href="http://www.facebook.com">Facebook     </a>  <span class="h2color">Found in 2004     </span>     </h2>   blah blah blah    <h2>     <A href="http://www.twitter.com">Twitter     </a>  <span class="h2color">Found in 2007     </span>     </h2>  blah blah blah    </div>    <div class="tv">   <h2>     <A href="http://www.fox.com">Fox     </a>  <span class="h2color">Found in 2004     </span>     </h2>   blah blah blah    <h2>     <A href="http://www.nbc.com">NBC     </a>  <span class="h2color">Found in 2007     </span>     </h2>  blah blah blah   </div> 

I am trying to make it look like this:

Answer 1

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

<social class="h2"> 

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.