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:
The answer is
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.
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.
Source: Stackoverflow.com