Basic HTML
Computing Resources >> Tutorials >> Web Development >> Basic HTML 

What is HTML?

Basic Tags

Text Formatting Tags

Links & Images

Additional Resources

Evaluate this Tutorial

 

Background and Text Colors

Before we start talking about how to change colors, it will be useful for you to understand the codes that correspond to the colors themselves. One way you can refer to colors with code is by using a hexidecimal code (often just called a hex code, an alphanumeric string of 6 characters ). The other common way to refer to colors is just by using a color's common name (note: it is best to reserve name use to common primary colors). Colors also have something called RGB values, which is a nine digit number...we won't be using those, but it's good to know what they are. RGB stands for red, green, and blue hues, respectively. There is a number assigned to each hue ranging from 0 to 255...hence the nine digit value. Let's look at exactly what I'm talking about. We'll use plain old black as an example. The hex code for black is 000000 (six characters always). The name equivalent is just "black." And last, the RGB code for it is R:000, G:000, B:000. That makes a lot of sense when you think about it because black is the absence of color...therefore, it receives all 0's for its codes. What would white be? Well, white is the combination of all colors, so its hex code is FFFFFF, its name is just "white," and its RGB code is R:255, B:255, G:255. You can find reference material for web safe colors quite easily. Here are two resources listing many colors' hex and RGB codes.

  1. Webmonkey's Color Palette
  2. Lynda.com's Web-safe Color Palette

So, let's look at how this works at a nuts and bolts level. First, let's say we wanted to change the background color to a light orange and make our text red. What we'll do is simply add an attribute (the bgcolor attribute) to the <body> tag to change the background color and we'll add a <font> tag to our paragraphs. Take a look at the following example.

<body bgcolor="#FF9900">
   <p><font color="#FF0000">Type your text here</font></p>
</body>

That's actually pretty simple. The hex code FF9900 is light orange (that's the background color) and the hex code FF0000 is red (that's for the text that will display on the web page). What would that actually look like? Take a look at the following example:

Here's what your web page would look like
with a light orange background and red text using the code example from above.

If you wanted to change it to different colors, just change the hex codes. Also, it isn't absolutely necessary to put the pound sign (#) before the hex code, but it is good style. Another way to change the text color is to add the text attribute to the body tag. This works just the same way as the bgcolor attribute does. It will apply to all text on your webpage, so if you do add that attribute, it will change the color of all your text regardless. How would we code that? Take a look at the following example:

<body bgcolor="#FF9900" text="#FF0000">
   <p>Type your text here</p>
</body>

This will yield the exact same results as above, but like I said, this applies globally (i.e. to every bit of text on your page). For obvious reasons, this can be good and bad. You have to make the call depending on what you want to do. If you want to use multiple colors, you'll need to use the <font color="code"> tag wherever you deem appropriate. You could use that in consort with the text attribute in the <body> tag also.

next section >


screenshot

© 2004 Chad Hutchens & Libby Peterek | iSchool | UT Austin | webmaster