How To Change The Text Font Style In A Web Page

HTML PROGRAMMING - CHANGE TEXT FONT STYLE

Continuing from the previous Text Align section, in this section I am going to show you how to change the font style used in text using the FONT Tag together with its COLOR, SIZE and FACE Attribute/Value pairings. I will also be demonstrating the B (Bold), I (Italic) and U (Underline) Tags. You should find font styling easy to grasp simply because you have already learnt quite a lot about tags, attributes and values in general. Here is the Text Alignment template I was working on in the last section. It does not matter too much what text is inside each column or row as I will be changing the text content in order to show you better examples.

Fig 1.0 Table width: 1000 Pixels - A variety of alignments

The FONT Tag and its Attribute/Value pairings are classed as Deprecated (old fashioned, but still in use). However. As you are just learning the HTML basics do not worry too much about this because you need to know the html foundations before moving onto CSS. With deprecated coding it is advised you use CSS code instead. What these "advisors" do not tell you is that CSS is generally more difficult to learn from scratch than HTML simply because you need to know the foundations of HTML before you begin to learn CSS. CSS sits on top of HTML - CSS Books refer to HTML equivalents. They rarely start from a CSS perspective.

Anyway! The FONT Tag can be used with either separate attribute/value pairings or combined attribute/value pairings, whichever is suitable for the occasion, but I will teach you the separate attribute/value pairings first. To begin with, you may want to change the text colour (font colour).

COLOR Attribute/Value

COLOR (American Spelling), when used with the FONT opening tag, changes the palette index (ink colour) of the current font and in turn changes the colour of the text that follows it. The COLOR attribute requires either a Hex-Decimal value (i.e. #FFFFFF) or a predefined Colour Name (i.e. white). For information about hex-decimal click here and for information about colour names click here. Although using a colour name is okay for basic colours it is recommended that you use a hex-decimal colour value if you want to use an exact colour. Hex-Decimal colour values are also used with many image editors, website builders, colour grabbers and so on. So learning the hex-decimal numbering system is almost a must, but not crucial.

In this first example I am going to change the text content inside row 1, column 1 to "I Am Green Text" and at the same time change the colour of that text. This is done by putting <color="green">, or <color="#00ff00">, inside the FONT opening tag. Note here, and throughout this section, that I will only be showing you the code you need to change within the table - You have seen the main web page code (template code) plenty of times now and in normal circumstances you would not change it. You would only change the web page content and its styling but not the main web page code itself.

<table width="1000" border="1">
<tr>
<td colspan="3" height="100" align="right" valign="bottom">

I Am Green Text

</td>
</tr>
<tr>
<td width="20%" height="300" align="right" valign="middle">
ROW Two (Down) - COLUMN One (Across) - Right and Middle.
</td>
<td width="60%" align="center" valign="top">
ROW Two (Down) - COLUMN Two (Across) - Center and Top.
</td>
<td width="20%" align="left" valign="bottom">
ROW Two (Down) - COLUMN Three (Across) - Left and Bottom.
</td>
</tr>
<tr>
<td colspan="3" height="80" align="center" valign="middle">
ROW Three (Down) - COLUMN One (Across) - Center and Middle.
</td>
</tr>
</table>

Fig 1.1 Table width: 1000 Pixels - The text has been changed and so has its colour

As said above, you could put  and you would still get the same result - green text, simply because both values equate to green ink. In the above example I put the FONT Tag next to the text I wanted to change and more precisely inside the column I wanted. If I had put the FONT Tag outside of the column code and inside the row code instead it would of changed the text colour of all columns within that row, as this next example shows.

<table width="1000" border="1">
<tr>
<td colspan="3" height="100" align="right" valign="bottom">
ROW One (Down) - COLUMN One (Across) - Right and Bottom.
</td>
</tr>
<tr>

<td width="20%" height="300" align="right" valign="middle">
ROW Two (Down) - COLUMN One (Across) - Right and Middle.
</td>
<td width="60%" align="center" valign="top">
ROW Two (Down) - COLUMN Two (Across) - Center and Top.
</td>
<td width="20%" align="left" valign="bottom">
ROW Two (Down) - COLUMN Three (Across) - Left and Bottom.
</td>

</tr>
<tr>
<td colspan="3" height="80" align="center" valign="middle">
ROW Three (Down) - COLUMN One (Across) - Center and Middle.
</td>
</tr>
</table>

Fig 1.2 Table width: 1000 Pixels - The text colour to be used inside the second row (comprising of columns 1, 2 and 3) has been changed to the colour green

By putting opening and closing FONT tags on the outside of all TD Tags (opening and closing column tags), and therefore inside the TR Tags (opening and closing row tags), you can default the columns within that row to only use green text. If you wanted to set columns 1 and 3 to use green text but column 2 to use red text you could do one of two things. 1) Set all columns to green text as in Fig 1.2 above and then put separate FONT Tags inside column two's TD Tags (as in Fig 1.1 above). Or 2) Put separate FONT tags inside each column's TD Tags. In this next example I will change the three columns in row two to use green, blue and brown text respectively.....using the just mentioned method 2.

<table width="1000" border="1">
<tr>
<td colspan="3" height="100" align="right" valign="bottom">
ROW One (Down) - COLUMN One (Across) - Right and Bottom.
</td>
</tr>
<tr>
<td width="20%" height="300" align="right" valign="middle">

ROW Two (Down) - COLUMN One (Across) - Right and Middle.

</td>
<td width="60%" align="center" valign="top">

ROW Two (Down) - COLUMN Two (Across) - Center and Top.

</td>
<td width="20%" align="left" valign="bottom">

ROW Two (Down) - COLUMN Three (Across) - Left and Bottom.

</td>
</tr>
<tr>
<td colspan="3" height="80" align="center" valign="middle">
ROW Three (Down) - COLUMN One (Across) - Center and Middle.
</td>
</tr>
</table>

Fig 1.3 Table width: 1000 Pixels - The text colours inside the second row (columns 1, 2 and 3) have been changed to green, blue and green respectively

Changing the text colour for a certain column/row only affects the text within that column/row and more precisely only the text within the FONT Tags. Any text outside of the FONT Tags, but still inside the column/row (still inside the TD Tags), is not affected by the colour change. In this next example I will change the text inside row 2, column 2 and give examples of colour change.

<table width="1000" border="1">
<tr>
<td colspan="3" height="100" align="right" valign="bottom">
ROW One (Down) - COLUMN One (Across) - Right and Bottom.
</td>
</tr>
<tr>
<td width="20%" height="300" align="right" valign="middle">
ROW Two (Down) - COLUMN One (Across) - Right and Middle.
</td>
<td width="60%" align="center" valign="top">
Normal BLACK Text

Text Colour Has Been Changed To BLUE - Inside FONT Tags

 
 
Normal BLACK Text Again
 
 

Text Colour Has Been Changed To RED - Inside FONT Tags

 
 
Normal BLACK Text Again
</td>
<td width="20%" align="left" valign="bottom">
ROW Two (Down) - COLUMN Three (Across) - Left and Bottom.
</td>
</tr>
<tr>
<td colspan="3" height="80" align="center" valign="middle">
ROW Three (Down) - COLUMN One (Across) - Center and Middle.
</td>
</tr>
</table>

Fig 1.4 Table width: 1000 Pixels - The text colours are being changed using the FONT Tags and the COLOR Attribute/Value pairings

As I was saying above. The text that is outside of the FONT Tags, but still inside the TD Tags (all the Normal Black Text in this case), is not affected by the colour changes made using the FONT Tags and COLOR Attribute/Value pairings. All text is black by default until it is changed. You may be thinking at this point "Have I got to use FONT Tags every time I want to change the colour of a couple of words?". And the answer to that would be YES, unfortunately. Fortunately though CSS (explained in its own section) solves this problem by allowing you to set the colour of each component (i.e. each paragraph style, heading style and so on). So for now, while you are still learning, you will have to use a FONT Tag with COLOR Attribute/Value pairings every time you want to change text colour. Saying this, it is not all doom and gloom simply because you should not really be changing text colour to that degree anyway.

The BR (Branch) Tag by the way, used in the above example, is used to move text onto the next line. It acts like a typewriter's carriage return key or the ENTER keyboard key on a computer. Leaving them out of the code would of meant the text being strung together as one long line and then wrapped as soon as it got to the edge of the column (as explained in the Text Alignment section). The text would also of been displayed as a, multicoloured, paragraph. This incidently is how you create different coloured text - You simply get your paragraph, mark out in your head which text is to be coloured within that paragraph and then add the FONT Tags to each piece of marked out text (encase each piece of marked out text with the FONT Tags). The first BR puts the cursor (invisible/imaginary cursor) on the next line and the second BR puts it on the second line, therefore creating an empty, spaced, line.

SIZE Attribute/Value

The SIZE Attribute/Value pairing follows the same rules as the COLOR Attribute/Value pairing in terms of code placement simply because it goes inside the opening FONT Tag just like COLOR. So to change the size of a font and any text that follows it you can either use  for example or  for example. The latter will also change the font colour and the colour of any text that follows it.

One thing you must remember here is that the FONT Tag, and other Tags as well, only change the internal settings (indexes, inks, sizes and so on) ready for use. Ready to be applied to the text that follows in this case. In other words you could put nothing (no text) in-between the FONT Tags but the web browser will still interpret your font command as "Set the font to size 3, colour red" for example, even though no text is going to be displayed. The space on the page will still be allocated for the text though, even as a blank line for example. Try it out!

SIZE normally uses an absolute number between 1 and 7 but can use a number between -2 and +4 as well (-2, -1, +1, +2, +3 and +4). The minus and plus numbers indicate a size relative to the base font size, which is 3. So if you use +2 as the font size the next lot of text to be displayed will be size 5, but not many people use minus/plus numbers simply because its easier/better to use an absolute number. Size 1 is the smallest and size 7 is the largest. Here is an example.

<table width="1000" border="1">
<tr>
<td colspan="3" height="100" align="right" valign="bottom">
ROW One (Down) - COLUMN One (Across) - Right and Bottom.
</td>
</tr>
<tr>
<td width="20%" height="300" align="right" valign="middle">
ROW Two (Down) - COLUMN One (Across) - Right and Middle.
</td>
<td width="60%" align="center" valign="top">
Normal BLACK Text (Default Font Size 3)
 
 

Text Colour Has Been Changed To BLUE - FONT SIZE 1

 
 

Text Colour Has Been Changed To RED - FONT SIZE 4

 
 

Text Colour Has Been Changed To BROWN - FONT SIZE 7

</td>
<td width="20%" align="left" valign="bottom">
ROW Two (Down) - COLUMN Three (Across) - Left and Bottom.
</td>
</tr>
<tr>
<td colspan="3" height="80" align="center" valign="middle">
ROW Three (Down) - COLUMN One (Across) - Center and Middle.
</td>
</tr>
</table>

Fig 1.5 Table width: 1000 Pixels - Various Font Sizes

One thing to remember when changing font size is that it can push your web page content downwards. For example. If your column is 300 pixels high now, with normal sized text, it can double or treble in height if you use font size 7 all the time for example. This in turn may make your other columns/rows look out of proportion, so it is important not to over do it when experimenting with font sizes. This next example shows this precisely.

Fig 1.6 Table width: 1000 Pixels - Over doing font size 7

All I did in the above example was resize each line of text in row 2, column 2 to use font size 7. It purposely exaggerates the point about over sizing with fonts. This applies to over sizing with font size 4 and so on. In other words. Get your spacing, both height and width, right by using the appropriate font size. And remember. The width of your text will also grow/shrink depending on the font size used.

FACE Attribute/Value

The FACE Attribute/Value pairing follows the same rules as the COLOR and SIZE Attribute/Value pairings in terms of code placement simply because it goes inside the opening FONT Tag just like COLOR and SIZE. So to change the face (appearance/font family) of a font and any text that follows it you use  for example or  for example. The latter will also change the font colour and font size of any text that follows it.

If you want to use a specific font that is on your computer but not necessarily on everyone elses you can specify more than one font. For example. If I want to use the Calibri font but am not sure if it is on your computer too I can use font face like so . This will tell a web browser to display text using the Calibri font, if it is available (installed). If it is not available, use the Verdana font instead. And if none of these fonts are available use the system default font (Times New Roman). So this process is a back up plan. Use my preferred font(s), if available, otherwise use the system default font. On top of using font names you can also specify font styles. For example. .

One thing to remember here is that you should use common fonts that are installed on everyone's computer (i.e. Arial, Times New Roman, Verdana and so on). Otherwise you may be isolating your visitors because your website looks bad on their computer due to it not displaying text using your preferred, beautiful, font. A common mistake made by the beginner is to use fancy fonts that they have downloaded from the internet. They look nice on their computer but cannot be appreciated on someone elses computer. Anyway. Here is an example of using font face.

<table width="1000" border="1">
<tr>
<td colspan="3" height="100" align="right" valign="bottom">
ROW One (Down) - COLUMN One (Across) - Right and Bottom.
</td>
</tr>
<tr>
<td width="20%" height="300" align="right" valign="middle">
ROW Two (Down) - COLUMN One (Across) - Right and Middle.
</td>
<td width="60%" align="center" valign="top">
Default Font
 
 

FACE Arial - SIZE 4 - COLOR Blue

 
 

FACE Verdana - SIZE 5 - COLOR Red

 
 

FACE Calibri (If Available) OR Times New Roman (Default Font Used) - SIZE 6 - COLOR Brown

 
 
Default Font
</td>
<td width="20%" align="left" valign="bottom">
ROW Two (Down) - COLUMN Three (Across) - Left and Bottom.
</td>
</tr>
<tr>
<td colspan="3" height="80" align="center" valign="middle">
ROW Three (Down) - COLUMN One (Across) - Center and Middle.
</td>
</tr>
</table>

Fig 1.7 Table width: 1000 Pixels - Various Font Styles

Another thing to remember is that different web browsers use different default fonts, which the user can normally change. For example. If you go to the TOOLS menu of Internet Explorer and click on its INTERNET OPTIONS menu-item you will see a FONTS button at the bottom of the GENERAL Tab. From there you can change the default font.

As mentioned at the beginning of this category, in the Structure Of A Web Page section, you can use BOLD, ITALIC and UNDERLINE styles with your text as well simply by inserting one of the following: Some BOLD Text, Some ITALIC Text, Some UNDERLINED Text. You can also do a combination of them, like so Some BOLD ITALIC UNDERLINED Text, but you must remember to keep them nested (in order). So in this example the Underline Tags are the inner tags. The Italic Tags are outside tags of the Underline Tags and the middle tags. And the Bold Tags are the outer tags.

In the next section I will be teaching you how to insert hyperlinks and pictures into the columns/rows. In the meantime. If you need to know more about Tags, Attributes and Values visit the W3Schools website.

Align Text Inside A Column/Row

Index

???