|
HTML Basic Tutorial
Lesson 4
Font Color
Font Size
Font Face or Font Name
Practice HTML (Use
it or Notepad)
Using Font:
So far our text did not look good. Beacuse it was taking
the default font of the browser. Now let's see how can we change the Font
color size and so on.
<Font> </Font> It
is a basic tag for Font.
Font Color
We need to define Font's attribute to see the different
text colors. Color is an attribute of Font.
<font color="red"> </font>
Type the basic html tags.
Now add font tags in it.
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<font color="red"> This
text is Red.</font>
</body>
</html> |
Now your text will look red in browser.
Here is another example. You can add
color name or hexadecimal value i.e RGB value of Color. Either will work.
Ex. #339933
Let's type our original basic html tag.
Now add font color in hexadecimal value.
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<font color="#339933"> This
text is green.</font>
</body>
</html> |
Now your font will look green instead of red.
Here is a color chart (hexadecimal value) for you. Click
here
Note: Copy the whole code
including # and paste it in your html font tag.
Font Size
Now let's define the size of our Font. Normally you
can define 7 sizes. i.e. 1 to 7, +1 to +7, -1 to -7.
<font size="2">
</font>
Type the previous html basic tags with font color.
Now we'll add font size in it. See you do not need to type font tag more
than once, but since the color and size are the attributes of font so
you can type them in one place.
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<font size="2" color="#339933"> This
text is green and size is 2</font>
</body>
</html> |
Now your text will look like this.
You can see previous text size was bigger in size because it was taking
its default value.
Font Face
Now we are going to add font name or face. This attribute
will also go in the same font.
<font face="arial">
</font>
So type the previous basic html tag with font color and size.
Now let's add new attribute font face.
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<font size="2" color="#339933" face="arial">
This text is green, size is 2
and name is arial</font>
</body>
</html> |
Now your text will look like this in your browser window.
Here are few examples of different fonts: It has same
size and same color but font face is different so it looks different.
| Times New Roman |
 |
| Black Forest |
 |
| Arial Black |
 |
You can also use more than one font face. You'll need
to separate each face with comma.
<font face="arial, helvetica, verdana">
</font>
|
