HTML Basix - HTML tutorials and online webmaster tools

Htaccess code generators Code generators Tutorials

Online and offline code generators

Subscribe to RSS feed
Subscribe to the HTML Basix RSS feed.


To change the text on your webpage, you need the "<font>" tag. To this, you can add certain attributes:

Font Colour

Using a hexadecimal colour chart, you can set the colour of the font.

<font color="#CC99CC">text</font>

<font color="#993366">text</font>

<font color="#CC00CC">text</font>

You can also use 'words' instead of the hexadecimal numbers, but not all browsers will interpret them properly. You're safest to stick with the numbers.

<font color="green">text</font>

<font color="blue">text</font>

Remember to place a closing "</font>" tag where you want the coloured text to finish. If the whole page is to be the same colour, place the "<font>" tag before ALL of the text and the "</font>" tag at the bottom of the page.

Font size

This is quick and easy...just like font colour, you add the size attribute to the "<font>" tag.

<font size="2">text</font>

<font size="3">text</font>

<font size="4">text</font>

<font size="5">text</font>

<font size="6">text</font>

All of the font attributes should be placed into the <font> tag together.

<font color="blue" size="3">text</font>

<font color="993399" size="5">text</font>

Font face

Font face is the type of font. The font type I've used on this page is 'verdana'. There are many you can use, but not all computers have all of the fonts installed on them. If you choose some weird and wacky font for your webpage, chances are most people will have the text displayed in the default system font. Best to stick to a 'web safe font'.

<font face="arial"> this font is "arial"</font>

<font face="comic sans ms"> this font is "comic sans ms"</font>

As not all computer will be able to display all fonts, you can specify in order which fonts to choose from. The computer will look for the first font listed, if it's installed, that's the one it will use. If it's not installed, the computer will look for the next font listed...and use it if installed. If none of them are installed, the system will use it's default font, so make sure you put a pretty standard font in there somewhere...

<font face="arial", "comic sans ms", "verdana", "arial">the system will go for the
first font it can find installed on the surfer's system.

Add the font face, colour and size all to the same tag...but always remember to place a closing "</font>" tag where you want your text formatting to finish.

<font color=green size="4" face="comic sans ms">using all of the tags together</font>

Bold, italics and underline

The tags to do this are "<B>""<I>" and "<U>"

<B>this is bold</B>

<I>this is italic</I>

<U>and this is underline</U>

<U><B>bold and underline</B></U>

<I><B>bold and italic</B></I>

<U><B><I>bold, italic and underline</I></B></U>

Put it all together....

<font size="3" color="green" face="comic sans ms"><I>and you can have this</I></font>

<font size="3" color="blue" face="times new roman"><U>or even this</U></font>

Finally, remember to 'nest' your tags so all browsers can interpret them properly. What does this mean? If you 'open' a "<font>" tag before a "<B>" tag, close the "</B>" tag before you do the "</font>" tag.

An example of the correct way is:
<font color="blue"><B>text goes here</B></font>

An example of the incorrect way:

<font color="blue"><B>notice the tags are in a different order.
What you open first, you close last.

Having trouble understanding font attributes? They are explained a bit more in depth in our beginner's lessons

Site Stats     
failed to establish a db connectionfailed to establish a db connection
   You beaut

This site is © HTML Basix 2003 - 2009