A Smarter Way To Learn HTML & CSS(2015)

12
Colors

Let’s say you want to display certain text in red. We’ll call the class standout.

.standout {
color: #cc0000;
}

You could, of course, tie the class to a text element. It could be p.standout or h2.standout, for instance. But we’ll make it an all-purpose class so we can use it for any type of text element. Here it is, applied to a single hyphenated word.

<p>This is going to be a <span class="standout">red-letter</span> day!</p>

Here it is, applied to a whole paragraph.

<p class="standout">Please read this chapter carefully. There <em>will</em> be a quiz.</p>

And here it is, applied to a heading.

<h1 class="standout">Robots that Care</h1>

In the CSS class as I defined it, the color is specified by a hex value, #cc0000. You can also use names from the CSS list of colors, like red, gold, and mediumslateblue. Get hex values for colors at http://www.colorpicker.com/. Get a list of CSS color names athttp://www.crockford.com/wrrrld/color.html.

In your CSS file create a class not tied to an element that colors text red. In your HTML file use a span to color some text red. Save the files and display your HTML file.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-12-1.html.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-12-2.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/12.html