Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address


Font Colour

WebMonkey Tutorials Oct 12, 2005

Font Colour<body text=?> sets the font color
<body link=?> sets the color of links
<body vlink=?> sets the color of followed links
<body alink=?> sets the color of links on click
<font color=?> changes font color
</font> returns font to default color

There are two ways to color text on the Web. One approach is to set the colors for the entire document - specified in the body tag - and the other is to set and change colors as you move through the document, using the font tag. While less flexible, the body tag is often more practical than the font tag, and it's also supported by more browsers. So we'll start there.

Using the body tag, you can set the stage for your entire document, specifying the colors for regular text, links (normally blue), and followed links (usually red). Remember, however, that colors are specified using a numerical code. In the background color tutorial, we explain how to calculate this code. But for now, you can just take our word that each number represents a specific hue.

If you type:

<body text=#9932cd link=#ff0000 vlink=#00ff00 alink=#000000>

You will get a nearly illegible, but correctly colored page, with green text and red links that turn black on click, and violet after they've been followed.

But what if three colors aren't enough? Or what if you only want to color a single word? Well, lucky for you (if not the rest of us), Netscape's font tags let you do it. If you write in your HTML file:

<font color=#00ff00>green</font> with envy.

You'll get:

green with envy.

You could even change the color of individual letters, if you really wanted to:

Joseph and the amazing
      <font color=#ff0000>T</font>
      <font color=#ff7f00>E</font>
      <font color=#ffff00>C</font>
      <font color=#00ff00>H</font>
      <font color=#0000ff>N</font>
      <font color=#6b238e>I</font>
      <font color=#9932cd>C</font>
      <font color=#ff0000>O</font>
      <font color=#ff7f00>L</font>
      <font color=#ffff00>O</font>
      <font color=#00ff00>R</font>

Will give you:

Joseph and the amazing T E C H N I C O L O R dreamtag

Which, frankly speaking, was hardly worth the effort. But that's not the point. The point is - you can.

As with all Netscape-specific tags, you should keep in mind that not all browsers support font color.

I hope this came in useful!

subscribe to newsletter