Step 7 – Colors

Last update: February 15 2019

Besides adjusting the font type and its size, you can also add the COLOR-attribute to the FONT-tag. Remember, within the BODY-tag, a TEXT color was defined for the whole document. Now, we’ll (temporarily) adjust this later on in the document with the FONT-tag.

Color Codes Explained

In Step 3, we already used HTML codes for colors. This code begins with a # followed by 6 characters, numbers or/and letters. Because these codes are a combination of 3 other codes, they are called hexadecimal triplets. By using these codes you tell the browser how much red, blue and green you want to mix for the result.

There are too many combinations possible, so please don’t feel guilty for not knowing all the codes! There are various programs and websites offering so-called color pickers. Even Google offers one. This will allow you to find the codes you want.

A few of them are handy to know though. Luckily, they are easy to remember:
#000000 = black
#FFFFFF = white.

Also, it’s possible to identify about 144 colors by name (“black”, “yellow”, “white”), though it’s not often used because they are true colors. Besides black and white, most of the other colors are so bright, they are just ugly on-screen.

Adding Color

In our index.html document we add a color to the FONT-tag:

<html>
<head>
<title>my own homepage</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial">
<p>Nora Tol started offering webdesign services since the <u>middle of the 90s</u> with her
first company <i><font color="#ff9b6A">Nora Tol Virtual Publishing</font></i> and, now,
with her second company,
<i><font color="#ff9b6A">ElNorado Productions</font></i></p>
<p><u>By growing demand</u>, she expanded her services with designing logos, hosting,
online marketing and even creating online content.</p>
<p>Take a look at her website for more information.<br /><b><font size="4">Or get in
touch</font></b>.</p>
</font>
</body>
</html>

In my text, I’ve decided to emphasize my company names by using a different color. If I wanted the whole text to have different color, then I would’ve added a COLOR attribute to the FONT-tag at the beginning of the text. Altogether, you’ve now learned all the attributes for the FONT-tag. You can set a FACE (font type), SIZE and COLOR. For example, <FONT FACE=”Arial” COLOR=”#FF9B6A”>

Again, we more commonly use CSS to set colors, types and sizes now.

On to Step 8

Bookmark the permalink.

Comments are closed.