Working with Different Text Colors

Color is a good way to highlight important parts of your listing. You can put headings or subheadings in a different color or highlight selected words or phrases in the same manner. Don't use too many colors, however; if your ad looks like a rainbow, the color loses its ability to impact.

Template 6.22. Title in Different Color

Our first colorful template keeps the descriptive text in basic black (always a good idea; black is the most readable color when you have a white page background) but uses a different color for the listing title. The template as presented in Figure 6.22 displays the title in blue, but you can edit the code to use any color you like.

Figure 6.22. Title in a different color from the body text.

As with many of these effects, there are two ways to code this template. The first approach is to use the <font> tag for the heading accompanied by the color attribute, like this:

<font color="blue"> <h1 style="text-align: center">This is the title</h1> </font> <p style="text-align: left"> This is the first paragraph of the description </p> <p style="text-align: left"> This is the second paragraph of the description </p>

The second way to do this is the all-CSS approach, using the color property, like this:

<h1 style="text-align: center; color: blue"> This is the title</h1> <p style="text-align: left"> This is the first paragraph of the description </p> <p style="text-align: left"> This is the second paragraph of the description </p>

Obviously, you can replace the "blue" color in this code with any color name or hexadecimal code.

Template 6.23. Title and Subtitle in Different Colors

If your template uses both a title and subtitle, you can put each of these elements in a different colorwhile still using black for the body text. Figure 6.23 shows such an approach.

Figure 6.23. Title and subtitle in contrasting colors; black body text.

While this template code uses blue for the title and teal for the subtitle, you can choose any color combination you like. Try to avoid overly contrasting colors, however; a red title/blue subtitle combination might look patriotic, but it's also a bit harsh on the eyes.

<h1 style="text-align: center; color: blue"> This is the title</h1> <h2 style="text-align: center; color: teal"> This is the subtitle</h2> <p style="text-align: left"> This is the first paragraph of the description </p> <p style="text-align: left"> This is the second paragraph of the description </p>

Template 6.24. Overview Section in Different Color

If you use an overview paragraph before your main item description, another way to set the overview apart from the main text is to put the overview in a different color. Figure 6.24 shows what this looks like.

Figure 6.24. Black body text with the overview section in a different color.

This template uses red for the overview text. This may be a bit bright for some users, so feel free to edit the code with a different overview color. (You can also add the color property to the <h1> title code, if you want something other than a black title.)

<h1 style="text-align: center">This is the title</h1> <p style="text-align: center; color: red; font-size: 14pt"> This is the overview section. </p> <p style="text-align: left"> This is the first paragraph of the description </p> <p style="text-align: left"> This is the second paragraph of the description </p>

Template 6.25. Bulleted List in Different Color

Bulleted lists sometimes look better when displayed in a slightly contrasting color to the body text. That's what we do in Figure 6.25, where the bullet list is in green.

Figure 6.25. Black body text with a bulleted list in a different color.

As with all these color examples, feel free to change the color designation to something more pleasing to your eye. Also feel free to add the color property to the <h1> title tag.

<h1 style="text-align: center">This is the title</h1> <p style="text-align: left"> This is the first paragraph of the description </p> <ul style="text-align: left; color: green"> <li>This is the first bullet</li> <li>This is the second bullet</li> <li>This is the third bullet</li> </ul> <p style="text-align: left"> This is the second paragraph of the description </p>

Template 6.26. Terms of Service in Different Color

The terms of service is another page element that sometimes works better when it's in a different color than the description text. In this instance, you want the TOS to be less noticeable than the description, so you want to use a color that's not quite as vivid, as shown in Figure 6.26.

Figure 6.26. Black body text with the terms of service in a different color.

For this template, I specified a medium gray color for the terms of service, which makes the TOS look subsidiary to the main text. Obviously, you can specify any color you like for the TOS; just replace gray with your color name or hexadecimal color of choice.

<h1 style="text-align: center">This is the title</h1> <p style="text-align: left"> This is the first paragraph of the description </p> <p style="text-align: left"> This is the second paragraph of the description </p> <p style="text-align: left; font-size: 8pt; font-family: Arial; color: gray"> <strong>Terms of Service</strong><br> This is the terms of service. </p>