Colored and Sized Text

Colored Text

Here’s the model for changing text color:

<span style="color: #xxxxxx">text</span>
<span style="color: name">text</span>

You can either use a six-digit numeric code, which must be preceded by a number a sign, or one of the built-in color names. The only color names that are guaranteed to be recognized by all browers are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. All modern browsers also recognize “magenta” as a synonym for “fuchsia,” probably because nobody knows how to spell “fuchsia” correctly!

If you use the hexadecimal codes, the main point to remember is that the first two digits/letters of the code tell the proportion of red, the middle two digits/letters give the proportion of green, and the last two digits/letters give the proportion of blue that should be combined to make up the color. The hexadecimal notation is a shorthand way of representing the numbers from 0-255 (where zero is none of a color, and 255 is the most of a color that you can have). This page shows the conversion from hexadecimal to numbers from 0-255.

Here’s an example. Try this and see what the results look like.

<span style="color: red">Danger, Will Robinson!</span><br />
<span style="color: #ff8620">Orange-ish color</span><br />
<span style="color: #4080c0">Sort of sky blue</span>

Once again, here is an analysis of the first example.:

<span style="color: red">Danger, Will Robinson.</span>
 ^^^^ ^^^^^  ^^^^^  ^^^
  1     2      3     4

1. Start a section of text.
2. Set its style attribute.
3. The property to change is the color of the text:
4. Change it to red.

Other Ways to Set Colors

When using a style, you can also set the proportions of red, green, and blue directly as percentages or as numbers from 0 to 255:

<span style="color: rgb(100%, 50%, 25%)">Text</span>
<span style="color: rgb(255, 127, 63)">Text</span>

If and only if your hexadecimal specifier consists of three pairs of digits, you may shorten the specifier by using three digits:

<span style="color: #77ff33">Text</span> <!-- same as -->
<span style="color: #7f3">Text</span>

<span style="color: #2a1c6f">Cannot be shortened</span>
<span style="color: #77f233">Cannot be shortened</span>

Sized Text

Using styles gives you far more flexibility than you had with the old, deprecated methods. We are not kidding when we say far more, so take a deep breath and hold on.

To change the size in which text is displayed, our style attribute will change the a font-size aspect to a new value. The font size is specified as a number and units. For example, if you want text to be displayed as 36 point, you say:

<span style="font-size: 36pt">Fairly large text.</span>

Important: you can not leave a blank after the number! You must abbreviate “points” as pt, not pts or point or points.

Here are the units you may use:

Try these and see what they look like.

<span style="font-size: 18pt">eighteen point</span><br />
<span style="font-size: 0.75in">three-fourths inch</span><br />
<span style="font-size: 22px">twenty-two pixels</span><br />
<span style="font-size: 2em">double-sized text</span><br />
<span style="font-size: 3ex">fairly large text</span><br />
<span style="font-size: 0.5cm">one-half centimeter</span>

But wait, there’s more! You can also use keywords for font sizes:

<span style="font-size: xx-small">extra-extra small</span><br />
<span style="font-size: x-small">extra small</span><br />
<span style="font-size: small">small</span><br />
<span style="font-size: medium">medium (default)</span><br />
<span style="font-size: large">large</span><br />
<span style="font-size: x-large">extra-large</span><br />
<span style="font-size: xx-large">extra-extra-large</span>

But wait, there’s even more! You can specify the font size as a percentage of the current size. If you want the font to be one and a half times as large as normal, specify font-size: 150%; for three-fourths normal size, use font-size: 75%. Try it and find out.

<span style="font-size: 50%">half size</span><br />
<span style="font-size: 75%">three-fourths</span><br />
<span style="font-size: 100%">normal size</span><br />
<span style="font-size: 125%">one and a fourth</span><br />
<span style="font-size: 150%">one and a half</span>

Combining Color and Size

Of course, you can combine both the color and size in one tag, or use separate tags when the situation demands. You cannot put two style attributes into a single element, so the following is 100% invalid and illegal.

<span style="color: red" style="font-size: 24pt">No!!!</span>

Instead, combine the two presentation properties and values into one style, separating them with a semicolon. You can read the starting tag in the following example as: “Start a section of text. Change the presentation style. The color property will be red and the font size property will be 24 point.

<span style="color: red ; font-size: 24pt">Yes!</span>

You may need to use multiple <span> elements if the situation requires it. Consider the following example.

In the first paragraph of the following example, all the words in the highlighted phrase are larger than normal and in color. In the second paragraph of the following example, I wanted a phrase that is larger than normal with only two words in a different color. In that case, it was easiest to use nested <span> elements to get the effect I wanted. Try it and find out.

<p>
  It’s our <span style="font-size:large; color:green">Grand Opening</span>
  party!
</p>
<p>
  Enter our <span style="font-size: large">drawing for
  a <span style="color:green">Vacation Cruise</span> to
  Mexico</span>. See you at the party!
</p>

Font Families

To change the typeface, use the font-family presentation property in your style attribute. The value is a list of font names that you want to use. The following list shows the three major types of fonts: serif (which has little hooks on the characters, sans-serif (no hooks on the characters), and monospace (all the characters are the same width).

Serif font
Sans-serif font
Monospace font

You may specify any font name that you like. Some people prefer Garamond or Palatino fonts for serifs, and Verdana or Arial for sans-serif. What happens if you say: <span style="font-family:Verdana"> but the client doesn’t have that font? In that case, the browser will use the default font. To get around this problem, you can give a list of font names, and the client will look for them, in order. It will use the default font only if it can’t find any of the fonts you’ve named. Example:

<span style="font-family: Garamond, Times">Serif choices</span>
<span style="font-family: Verdana, Helvetica">Sans-serif choices</span>

To guarantee that you will get what you want, you can specify a generic font name as your last choice. The following example shows a set of choices that will work on Linux, Macintosh, and Windows, even though the fonts aren’t the most beautiful available:

<span style="font-family: 'Times New Roman', Times, serif">Serif choices</span>
<span style="font-family: Arial, Helvetica, sans-serif">Sans-serif choices</span>
<span style="font-family: 'Courier New', Courier, monospace">Monospace choices</span>

Because the font names Times New Roman and Courier New contain blanks, you should enclose them in quote marks. Since you have already used up double quotes, use single quotes.

Styles Work Everywhere

Up to this point, we have used <span> because it is a convenient “blank slate” container upon which to apply styles. If you want a heading to appear in teal text, or a paragraph to appear in 150% of normal size, you may do this:

<h2><span style="color:teal">Teal Heading</span></h2>
<p><span style="font-size: 150%">Big paragraph.</span></p>
<p>Normal-sized paragraph.</p>

It is also possible to apply a style to any element, not just a <span>. The example above is more easily expressed by applying the style directly to the desired element:

<h2 style="color:teal">Teal Heading</h2>
<p style="font-size: 150%">Big paragraph.</p>
<p>Normal-sized paragraph.</p>

Setting the Background Color

You may set the background color for the entire page by adding a style attribute to the <body> element. The presentation specifier is background-color. Thus, to give the page a light aqua background, you would say:

<body style="background-color: #ccffff">

Similarly, you can set the text and background color together in a style:

<body style="background-color: #ccffff; color:green">

Again, you may set the background color on any element. If you want a warning message to have red text on a yellow background, you can do it this way:

<span style="color:red; background-color: yellow">Warning!
Do not operate this computer underwater.</span>