Advanced Text Formatting


1.0 Text color
1.1 Using the <font></font> tag pair
One of the easiest ways to color text is to use the "font color" tag pair. To make the text red, for example, use the following code:

<font color="#ff2f11">This text will appear red</font>

1.2 Formatting Color Within the Body Tag


You can control the colors of not only basic text but also links and visited links. This approach is especially useful when your background color makes it difficult to read default text colors. For example, normal text appears black, normal links appear blue, and visited links appear pink/purple. If you chose a background color similar to one of these default colors, it might be difficult to read some of the texts or links.

Default Text Colors Custom Text Colors
This is the default text color (black)
This is the default link color (blue)
This is the default visited link color (purple)
This is a custom text color (white)
This is a custom link color (yellow)
This is a custom visited link color (green)

Inserting text color tags within the <body> can format such colors throughout your document. For example, the following code below produce the custom text colors displayed above. However, regardless of how you format text color, users can configure their browsers to alter or ignore such color.

<body text="#ffffff" bgcolor="#000000" link="#ffff00" vlink="#66cc33">


2.0 Text Alignment Using the <p></p> tag pair

Although you can create a paragraph break with a single <p> tag, you can also format paragraphs with the <p></p> tag pair by placing the contents of the paragraph between the tags. You can then justify the text so that it is either (1) flush-left, jagged-right, (2) flush-right, jagged-left, (3) centered, or (4) justified on both margins. Note that the default is for text to be flush-left, jagged-right; so you won't usually need this code.
flush-left, jagged-right

<p align="left"></p>
flush-right, jagged-left

<p align="right"></p>
centered

<p align="center"></p>
justified on both margins

<p align="justify"></p>

This text is flush-left, jagged-right. This text is flush-left, jagged-right. This text is flush-left, jagged-right. This text is flush-left, jagged-right

This text is flush-right, jagged-left. This text is flush-right, jagged-left. This text is flush-right, jagged-left. This text is flush-right, jagged-left. This text is flush-right, jagged-left. This text is flush-right, jagged-left.

This text is centered. This text is centered. This text is centered. This text is centered. This text is centered.

This text is justified on both margins. This text is justified on both margins. This text is justified on both margins. This text is justified on both margins.


3.0 Font Style Using the <font></font> tag pair

You can alter the default font style with the <font></font> tag pair this way:

This code will produce . . .
this text.
This is the current default font This is the current default font
<font face="courier">This is Courier font</font> This is Courier font
<font face="arial">This is Arial font</font> This is Arial font
<font face="times">This is Times font</font> This is Times font
<font face="garamond">This is Garamond Font</font> This is Garamond Font
<font face="helvetica">This is Helvetica Font</font> This is Helvetica Font

Use alternatives to the default font face sparingly. Avoid changing font style frequently, and eschew garish fonts. Basically, you probably do not need any fonts other than those above. Regardless of how you format font styles, users can configure their browsers to alter or ignore such formatting.