HTML/Fonts and colours

HTML has a very flexible tag, the  tag. This article will show you the many ways it can be used. Keep in mind however, that this tag is 'deprecated', so when you feel like you know enough about HTML, move on to CSS stylesheets for formatting, and forget you ever learned about this tag.

Changing font colours
The colours of the text can be changed like this:

Red text

'''Use American English only, do not use British English. If you use British English, your code won't work!'''

Which makes red text:


 * Red text

You may be thinking "what on Earth is that #FF0000 stuff?". That is a colour code, in hexadecimal. It allows you to specify a whole range of colours to use. You may want to read web colors if you plan to use them, but here we will use a simplified method. You can instead name the colour you want to use, by using a constant. The above example can be simplified like this:

Red text


 * Red text

Isn't that much easier? There are 16 colour constants you can use, outlined in the following table:

For a much larger selection of colors (139 in total), see the Named Colors table. Here is a tiny sample:

Changing font size
The  tag also allows you to change the font size. For an idea of the full range of sizes you can use, read this example:

Font size 1 Font size 2 Font size 3 Font size 4 Font size 5 Font size 6 Font size 7

This shows you the 7 font sizes:

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

So as you can see, the font can go from very small to very big. You may also want to check out the  tag for making large text, and the   tag for making small text: Small text, Normal text, Oversized text Produces:
 * Small text, Normal text, Oversized text

You can also use use:
 * 1) xx-small
 * 2) x-small
 * 3) small
 * 4) medium
 * 5) large
 * 6) x-large
 * 7) xx-large

Changing font appearance
You can change the font that text is written in using the  attribute, as in this example:

Courier new Verdana Arial

Gives us this:

Courier new Verdana Arial

You should wherever possible use common fonts that can be found in all operating systems, otherwise many people will not be able to use your website. Also note that excessively fancy fonts can be hard to read.

To avoid these problems, it is widely supported to use the following generic styles which are designed to render using the most appropriate available font, or a users preference.

The three most supported types of font are: Sans Serif Serif Monospace Less common but also available are: Fantasy Cursive

In your browser these are shown as: Sans Serif (This is a smooth font designed for on screen) Serif (This is not smooth and looks best on paper) Monospace (This is a fixed-width font designed for computer code) Fantasy (This is a happy font used for less serious pages) Cursive (This is a handwriting font again just for more interest)