The Ins and Outs of Text Formatting

• Fonts

• Colors and image backgrounds

• Text spacing

Working with Fonts

When it comes to text formatting, nothing really impacts the overall appearance of text more so than the font used to display the text. You learned earlier in the lesson that CSS includes several styles for setting the font for text content. However, I now want to take a closer look at these font properties and also show you a more concise way to specify the font for a style rule. Following are the CSS font style properties that you can use to alter the font of text content:

• font-style Sets the style of a font

• font-weight Sets the thickness of a font

• font-size Sets the size of a font

• font-family Sets the family of a font

• font Sets the style, thickness, size, and family of a font within a single property

If you recall from earlier, the font-style property allows you to set the style of a font and can be set to normal or italic; the default value is normal. The font-weight property sets the weight, or thickness, of a font and can be set to any of the following values: extra-light, light, demi-light, medium, demi-bold, bold, or extra-bold. The default value of the font-weight property is medium, which is an average font weight. The font-size property sets the size of a font using a unit of measure such as points (pt). The I property sets the family, or face, of a font, which is the name used to describe the font. Following is an example of how you use these four style properties together to establish a font style rule:

title {
  display:block;
  font-style:italic;
  font-weight:bold;
  font-size:18pt;
  font-family:Courier, serif;
}

Notice in this code that the font-family style rule actually consists of two family names: Courier and serif. The reason for this is because there is no guarantee that a particular font will be available on a given system. To solve this problem, you can list alternate font families that will be used in the event that the primary family isn't available. In the title example, the Courier font family is specified as the primary family, but the secondary serif family will be used if the Courier family isn't available. If none of the font families are available, it is the responsibility of a web browser to find a suitable match within the font families that are available.

Although the previous title example shows a perfectly reasonable approach to setting the font styles for a style rule, there is a better approach if you plan on setting several font styles. I'm referring to the font style property, which combines the other four font styles into a single property. To use the font property, you simply list the style, weight, size, and family of the font separated by spaces. Following is an example of how the font property makes the title style rule much more concise:

title {
  display:block;
  font:italic bold 18pt Courier, serif;
}

As this code reveals, the font property provides a good way to simplify the code for font styles. However, the font property is really only a convenience property and doesn't actually add any features of its own.

Jazzing Up Text with Colors and Image Backgrounds

If changing the font of text doesn't provide you with enough flexibility, you can go a step further and spice up text by altering its color and background appearance. Using CSS, it is possible to set the color of text, the background color shown behind text, and even a background image that appears behind text. Following are the properties that make this kind of visual trickery happen:

• color Sets the foreground color of text

• background-color Sets the background color of text

• background-image Sets the background image of text

• background-repeat Determines how the background image of text appears

• background Sets the background color, image, and repeat of text within a single property

The color property sets the color of text and can be set to any of the following standard colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Following is an example of how you might set the color in a style rule using the color property:

title {
  display:block;
  font:italic bold 18pt Courier, serif;
  color:green;
}

In this example, the text color of the title element is set to green, which results in the text content for the element being displayed in green. If you'd like to specify a color other than one of the standard colors, you can create a custom color and assign it to the color property. To do so, you must create the custom color as a combination of the primary colors red, green, and blue. The combination of red, green, and blue color components is known as RGB and is the color system used to specify custom colors in CSS. The red, green, and blue color components are expressed as hexadecimal numbers that are stuck together to form a complete custom color value, such as #00FF00, which is the color green.

A custom color consists of six digits, which are actually three two-digit pairs, preceded by a number symbol (#). Each one of the two-digit pairs represents one of the three primary color components (red, green, and blue). Perhaps the best way to understand how custom numbers are encoded in hexadecimal is to look at the hexadecimal values for several of the standard colors:

• aqua #00FFFF

• black #000000

• blue #0000FF

• fuchsia #FF00FF

• gray #808080

• green #00FF00

These few examples should give you an idea as to how custom colors are described by hexadecimal values. Following is an example of how you would set the color property to the color blue using a hexadecimal value:

color:#0000FF;

Now that you have a better understanding of how color works in CSS, let's return to the discussion of formatting text with color. Similar to the color property, the background-color property accepts a color, but in this case the color represents the background color of a style rule, not the text color. Following is an example of the background-color property in action:

title {
  display:block;
  font:italic bold 18pt Courier, serif;
  color:green;
  background-color:#808080;
}

In this example, green text is drawn over a gray background thanks to the color and background-color properties. If a background color isn't quite fancy enough for you, you can specify a background image that is displayed behind the text content of an element. The background-image property accomplishes this task, as the following example reveals:

title {
  display:block;
  font:italic bold 18pt Courier, serif;
  color:green;
  background-image:url(jungle.gif);
}

In this example, the background image named jungle.gif is specified for the title style rule. Notice that the image URL is enclosed in parentheses that follow the word url; this is how image URLs must be specified when using the background-image property.

When you set a background image for a style rule, the image is automatically tiled to fill the entire rectangular area of the element that is displayed. If you want to control the manner in which a background image is tiled, you can do so with the background-repeat property, which accepts the following values: repeat, repeat-x, repeat-y, and no-repeat. The default value is repeat. The no-repeat value displays the background image once, whereas the repeat-x and repeat-y values tile the image repeatedly in the X and Y directions, respectively. Following is an example of setting the background-repeat property to have a background image appear only once:

title {
  display:block;
  font:italic bold 18pt Courier, serif;
  color:green;
  background-image:url(monkey.gif);
  background-repeat:no-repeat;
}

If you'd like to specify several background properties without entering as much code, you can use the background property, which sets the background color, image, and repeat properties in a single style. Following is an example of setting the background property for the title style rule:

title {
  display:block;
  font:italic bold 18pt Courier, serif;
  color:green;
  background:green url(jungle.gif) no-repeat;
}

In this example, the background property is used to set a background color, to set a background image, and also to specify that the image be displayed only once.

Tweaking the Spacing of Text

You can achieve some interesting text effects by playing around with the spacing between characters. There are two CSS style properties that allow you to control the indentation and character spacing of text: text-indent and letter-spacing.

These two properties both can be specified in units that you are hopefully familiar with by now: points (pt), inches (in), centimeters (cm), or pixels (px). Following is an example of how to set the indentation of a paragraph of text using the text-indent property:

message {
  display:block;
  text-indent:1.5in;
}

This code sets the indentation of the message element to one-and-a-half inches, which means the first line of the text in the element is displayed an inch-and-a-half over from the left edge of the element's rectangular area.

Although the letter-spacing property impacts text much differently than the text-indent property, it is specified similarly. Following is an example of how to alter the character spacing of the message element:

message {
  display:block;
  text-indent:1.5in;
  letter-spacing:5pt;
}

In this example, the letter spacing of the message style rule is set to 5 points, which means the individual characters in the message are separated by an additional 5 points when displayed. An interesting facet of the letter-spacing property is that it can also be used to move letters closer together by specifying a negative value.