What is font color in HTML
A plain black and white web page might be functional, but
its not very interesting. Let’s
see how we can improve the appearance of our web pages using
the font tag and color
attribute. It’s very easy. Let’s return to the html we had
in the last lesson:
<!DOCTYPE html>
<html>
<body>
<center><h1>Hello
World!</h1></center><br>
<h2>Friends</h2>
My name is Joe.<br>
My friend is Sally.
</body>
</html>
To have a text string appear in a particular color, we use
the syntax:
<font color=“color”>Text String</font>
Hence, we can have text appear red using:
<font color=“red”>Some text</font>
Changing our html file with this in mind we can make the
main header red:
<!DOCTYPE html>
<html>
<body>
<center><h1><font color=“red”>Hello
World!</font></h1></center><br>
<h2>Friends</h2>
My name is Joe.<br>
My friend is Sally.
</body>
</html>
The web page now appears as:
Hello World!
Friends
My name is
Joe.
My friend is
Sally.
Let’s say we
wanted the “Friends” sub-header to appear as blue text. All we have to do is
add another
font tag with the color attribute, for the “Friends” text string:
<!DOCTYPE
html>
<html>
<body>
<center><h1><font
color=“red”>Hello World!</font></h1></center><br>
<h2><font
color=“blue”>Friends</font></h2>
My name is
Joe.<br>
My friend is
Sally.
</body>
</html>
Note that we
need a closing tag when using different font attributes.
Now our web page looks like this:
Hello World!
Friends
My name is
Joe.
My friend is
Sally.
Besides
changing color, you might want to make other changes to fonts such as setting
the
type face.
We will explore this in the next lesson
Font Size and Type Face
In this lesson we’ll learn how to change font size and type
face. This is also done using the
font tag. To specify a font size, we simply write:
<font size=“x”>This is some text.</font>
where x is an integer. For example we can write:
<font size=“3”>My name is Joe.</font>
You can set different attributes using the same font tag.
Let’s suppose that we wanted the
text to appear red and set the font size to 5. This could be
done by writing:
<font size=“5” color=“red”>My name is
Joe.</font>
This produces:
My name is Joe.
To change the typeface, we can set the face attribute in a
font tag. For example, to set the
font of a text string to verdana, we write:
<font face=“verdana”>My other friend is
Bob.</font>
And we obtain:
My other friend is Bob.
As before we can combine multiple attributes including the
typeface. So lets set the text to
green, the face to verdana, and also set the size attribute
of the text
<font color=“green” face=“verdana” size=“4”>My other
friend is Bob.</font>
This gives us:
My Other friend is Bob.
Being able
to change these font attributes gives us the power to improve the appearance of
our web
pages. Referring to the html of the last chapter, suppose that we changed it
to:
<body>
<center>
<h1><font
color=“red”>Hello World!</font></h1>
</center>
<h3><font
color=“blue”>Friends</font></h3>
<font
color=“red” size=“5”>My name is Joe.</font>
<br>
<br>
<font
color=“blue” size=“4”>My best friend is Sally.</font>
<br>
<br>
<font
color=“green” face=“verdana” size=“4”>My other friend is Bob.</font>
<br>
<br>
</body>
</html>
Now we see:
Hello World!
Friends
My
name is Joe.
My
best friend is Sally.
My other friend is Bob
