PageResource.com - Web Development Tutorials

Manipulating Font Size and Color

How to change font sizes and colors
Note: A better method of changing font sizes and colors is the use of Cascading Style Sheets.

Okay, now we want to see how to change the font size. This is done with the following tag:

<font size="x">text to change</font>

"x" will be replaced by a number with a + or - sign in front of it. So let's say you wanted to make the font larger. You can use the tag with a +2, like this:

<font size="+2">I'm a big sentence now!</font>

This will give us the following:

I'm a big sentence now!

Likewise, you can make the font smaller in the same way, using the - sign:

<font size="-2">Hey, I'm Small!</font>

Will give us this:

Hey, I'm Small!

Here are some more size examples for you:

<font size="+4">Hey There</font>
Hey There

<font size="+3">Hey There</font>
Hey There

<font size="+2">Hey There</font>
Hey There

<font size="+1">Hey There</font>
Hey There

<font size="-1">Hey There</font>
Hey There

<font size="-2">Hey There</font>
Hey There

<font size="-3">Can you read this?</font>
Can you read this?

Now, suppose you want to change the font color. This is done in much the same way. Here is the tag:

<font color="color">

We replace the word color with a color name or the hexadecimal color value. Let's do one using the color name to begin:

<font color="red">I'm red!</font>
I'm red!

Now let's use the hexadecimal value for red. The hexadecimal representation begins with a # sign and is followed by six letters and/or numbers. Here is the example:

<font color="#FF0000">I'm red!</font>
I'm red!

That is a # sign, two F's and four zeros. Usually it's easier to remember the color names, but you may want to have the hex code for more complicated colors. If you want to see a sample list of color names and hex codes, click here.

Now suppose you want to change the size AND the color. To do this, you can use two font tags and remember to close them both, like this:

<font size="+2"><font color="gold">I am gold!</font></font>
I am gold!

Also, you can use the size and color declarations inside the same tag, and close only one tag. This is done like this:

<font size="+2" color="gold">I am gold!</font>
I am gold!

You can also declare the font color inside the BODY tag. We will discuss this in a later section called Using the Body Tag Declarations. For now, we will move on to the next section: Special Characters: The extra space, copyright symbol, and more.


Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy