I'm looking to streamline my stylesheet to easily change the color of different text elements. I've created a list of general colors that can be applied using classes, like (class="blue"). Here are some examples:
.dark-grey { color: #232323; }
.med-grey { color: #616161; }
.light-grey { color: #e2e3e4; }
.orange { color: #f66511; }
.light-orange { color: #f66511; }
.blue { color: #2251a4; }
.white { color: #ffffff; }
However, in my specific example, the text for Subaru Forester is not turning blue. Do I need to add those color classes within the div for them to take effect?
If you'd like to see my code and experiment with it, here's the link to my jsfiddle: http://jsfiddle.net/huskydawgs/1ysq0c3y/7/
Below is the code snippet:
<p class="orange"><strong>Honda CRV</p>
<p>See full features and specs of the 2014 Honda CR-V SUV at the Official Honda Web site. View seating dimensions, EPA mileage ratings and engineering</p>
<div id="wrapper-landing">
<p class="blue"><strong>Subaru Forester</strong></p>
<p>Fuji Heavy Industries, the company that builds Subaru vehicles, is a master of the economics of scale and, until the arrival this year of the 2013 BRZ sports car, built an entire product line from just two different vehicle platforms, two different power trains and, of course, two different versions of the company's Symmetrical All-Wheel Drive (AWD) system. The new 2014 Subaru Forester, a popular compact crossover SUV, springs from the company's small car platform, which also provides the basis for the Impreza, the WRX and the XV Crosstrek models.</p>
</div>
And here's the CSS that I'm using:
body {
color: #666666;
font-family: 'SegoeRegular',Helvetica,Arial,sans-serif;
font-size: .8em;
text-align: left;
line-height: 1.6em;
margin: 0;
padding: 0 0 0 0;
}
.blue { color: #2251a4; }
.orange { color: #f66511; }
#wrapper-landing {
width: 916px;
margin: 0 auto 50px auto;
padding: 0;
}
#wrapper-landing p {
color: rgb(102, 102, 102);
font-family: 'SegoeRegular',Helvetica,Arial,sans-serif;
font-size: 1.1em;
line-height: 1.6em;
}