How To Change Custom HTML Font Size, Style & Colour

During this HTML tutorial, Search Focus Ltd will show you how to create a very simple and standard home page!

Making Changes & Declaring Fonts

Let’s start off by editing the title of your website. Let’s say you wanted to call your page “Search Focus Ltd”, here is how you would change it:

<title>Your Website Name</title>

Change “Your Website Name” to whatever your website name may be. Note that your website name is contained within the opening tag of <title> and then closed with the closing tag of </title>. Our “index.html” page now reads:

<title>Search Focus Ltd – Custom Web Design, Interactive Learning Center</title>

Declaring font types are very important because you may not like the default fonts associated with  HTML. The font tags (<font> and </font>) are one of the most commonly used tags in HTML coding.  While they have been replaced recently with the use of external style sheets, in a strictly HTML setting,  font tags are important to remember. In the most basic form, the tags will simply show text on a page, like so:

This is an example of some text that is located in between font tags!

This was done with this line of coding:

<font>This is an example of some text that is located in between font tags!</font>

The font tags are placed in between the <body> and </body> tags. The above exampled use of font tags tells the browser to display the text in a standard font (Times New Roman), font size and in the color black.

Digging Deeper Into the Font Tags

The “face” attribute declares what font you wish to display the text in. Adding onto your opening font tag, input the below example into your file:

<font face=”Verdana”>This is an example of some text that is located in between font tags!</font>

The only way that a browser can detect that you wish to use a different font on your web page is by placing the face=”fontname” after “font” in the opening <font> tag.

More than one font attribute may be added to your font tags, in fact there are many different attributes you will learn about that can be added to font tags! For now, let’s take a peek at font size attribute. Font size is set by using a number from 1 (smallest) to 7 (largest). You could make a large title using font size, instead of the header tag. Here is an example of using both attributes we have discussed this far:

<font face=”Verdana” size=”5″>This is an example of some text that is located in between font tags!</font>

By following these steps you have successfully told the web browser to display the font you select in Verdana font and a size of 5!

Finally, let’s cover the font color attribute! While the default color of your text will always be black, you can change that at any point by adding the “color” attributes to your font tags. You can either use an “HTML Color Word” (red, blue, green, etc…) or more specifically you can use HEX codes. HEX codes are in the format #000000 (# followed by numbers and letters). Here is an example of both methods:

<font face=”Verdana” size=”5″ color=”blue”>This is an example of some text that is located in between font tags!</font>

This is an example of the first method mentioned. Using HTML Color Word’s is NOT recommended by Search Focus Ltd, but for educational purposes it is important to know about.

<font face=”Verdana” size=”5″ color=”#333333″>This is an example of some text that is located in between font tags!</font>

This is an example of the second method mentioned. Using HEX codes is the most efficient and precise way to select a color for your text. In this example we used a light grey as our color, which is code “#333333″.

Finally, Let’s Discuss Alignment

Aligning your text is important to learn about, because you may not always want your text jammed against the left side of the screen. There are four options in the most basic HTML coding – “left”, “right”, “center” and “justify”. These belong in their own tags, like the below examples:

<right>
<font face=”Verdana” size=”4″ color=”#000000″>This text is right-aligned</font>
</right>

OR

<center>
<font face=”Verdana” size=”4″ color=”#000000″>This text is right-aligned</font>
</center>

Summary

In conclusion we have covered the font tag in good detail, you have placed text on your very own web page! Try playing around with it a bit on your own, consider it homework. Your page should look similar to the below coding:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Search Focus Ltd – Custom Web Design, Interactive Learning Center</title>
</head>

<body>
<left>
<font face=”Verdana” size=”4″ color=”333333″>Welcome To My Home Page!</font>
</left>
</body>
</html>

That concludes this tutorial that covers the basic HTML elements that styles fonts.