Introduction to HTML: Adding Colors and Fonts

To change the background color, you need to add an attribute and a color value to the opening BODY tag (you never add an attribute to a closing tag!). Here is what the attribute looks like:

bgcolor="#ffffff"
Here is what it looks like in the BODY tag:
<BODY bgcolor="#ffffff">
The "#ffffff" value is a hex code. There are literally hundreds of possible hex codes you can apply to a background. Click here to see some of the possibilities. "#ffffff" is the code for white, and you need to always use the "#" and enclose the hex code in quotations (it's a value of an attribute, remember).

This is a good time to put in a word about color choices. Subtle is good. You don't want to overwhelm people with your color choices, so bright yellow is probably not a good background color. Always preview your choices in a web browser!

There are more attributes we can put in the BODY tag that will affect the color of text and links on a web page. These attributes are:

text="#000000"
link="#0033cc"
vlink="#ff0000"
The text attribute affects the color of regular text (text that is not linked) on a page. The link attribute affects the color of the linked text on a page (the default color for links is blue). The vlink attribute affects the color of links that have been visited on a web page (the default color for visited links is purple).

If I add these attributes to the BODY tag, it will look like this: 

<BODY bgcolor="#ffffff" text="#000000" link="#0033cc" vlink="#ff0000">

The background for the page will be white (the bgcolor attribute, "#ffffff" is the hex code for white), the text (the text value, "#000000", is the hex code for black) will be black, links (the link attribute) will be blue, and visited links (the vlink attribute) will be red.

Let's go ahead and add attributes to the BODY tag of our index.html file.

  1. Open the index.html file in Notepad.
  2. Replace the opening <BODY> tag with this tag:
    <BODY bgcolor="#ffffff" text="#000000" link="#0033cc" vlink="#ff0000">
  3. Save the file in Notepad then preview it with a web browser.
Not too tough, huh? But these BODY attributes affect all the text on a web page. What if you wanted control over the colors of specific pieces of text on your page? For that you need to learn about the FONT tag.

Introduction to Fonts

All text on a web page is in a font. A font is basically a text style. You know font faces by name: Arial, Courier, Times. Fonts also have sizes and colors. Your browser uses some default font settings: the default face is usually Times and the default size is 3, and the default color is black.

But the FONT tag allows you to override those defaults, and display text in special ways.

Here's an example from Webmonkey (an excellent HTML tutorial website from Wired magazine). Take the word:

TECHNICOLOR
If I do nothing to it, it is just plain black text, size 3. But if I add a FONT tag to it, and add the attributes color (use bgcolor only in the BODY tag) and size I can change the look of the word: 
<FONT color="#ff0000" size="5">TECHNICOLOR</FONT>
which looks like this in a web browser:
TECHNICOLOR
You notice that adding the size="5" attribute with value 5 made the text larger? Font sizes range from 1 to 6:
<FONT size="6"> is large
<FONT size="1"> is tiny
The face attribute is trickier; you should only use font faces that everybody has on their computers. Arial is a safe font face to use, and is very readable which makes it very popular. Courier and Times are also safe choices. You should stick with these font faces for now.

Here is an example of the FONT attributes color, size, and face in action:

<FONT color="#ff0000" size="3" face="Courier">TECHNICOLOR</FONT>
which looks like this in a web browser (notice that I reduced the size of the font, and changed the face to a typewriter-like font face called Courier):
TECHNICOLOR
You could even make each letter in a word a distinct color: 
<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>
which looks like this in a web browser:
T E C H N I C O L O R

If you use the FONT tag to assign colors, those colors will override any colors you assigned in the BODY tag.

Now let's add some font colors to the index.html page.

  1. Open the index.html file in Notepad (if it isn't already open!).
  2. Let's add some contact information to the page. Since my page is for a library, I'm going to add the street address and phone number and I want it to be dark green (hex code is #006633):
    <DL>
    <DD><FONT color="#006633">123 Main Street</FONT>
    <DD><FONT color="#006633">Los Angeles, CA</FONT>
    <DD><FONT color="#006633">ph: 213-555-1122</FONT>
    </DL>
    I am going to place it in my index.html file above the links to Google, etc. and here is what it will look like in a web browser:
    123 Main Street
    Los Angeles, CA
    ph: 213-555-1122

After you have added these tags, be sure to save your file then preview it in a web browser. It looks like a real web page! Click here to see my index.html file in its entirety. Notice that my background is now white, and the address text is green. If you click on a link and go back to my index.html page, you will see that the visited links are red. Remember, to see the code of my (or any) web page, open the View menu in your browser and select Source.

Next: Adding Images