Some cookies are necessary to make this site and our content available to you. Other Cookies enable us to analyse and measure audience and traffic to the site. Cookies are also used by us, advertisers, ad-tech providers and others to develop and serve ads that are more relevant to your interests. To consent to the use of Cookies and proceed to the site, click Accept below. If you wish to withdraw consent later you will find a link in the footer Cookie Choices. For more information: Privacy Policy.
☒
Search Neopets

Lesson 4 - Font Colours

You can change the colour of your font very easily. For the most frequently used colours, you can use the name of the colour, e.g red, black, green, blue, gray, white. HTML uses American English spellings, so if you want to change the colour of something, you need to type "color." If you want to colour something grey, you need to type "grey." If you want to make a word red, you would type: <font color="red"> text here </font>, which would appear as text here.

For more specific colours, you may need to use a hexadecimal code. This is the unique code given to each shade of colour. All colours have a combination of 6 numbers and letters that represents an exact shade. Some common codes are:
Bright red = FF0000
Purple = CC00CC
Pink = FF66FF
Light Blue = CCCCFF
Lime Green = 99FF99

To use the hexadecimal code, simply type: <font color="FF66FF">text here</font> This would make the text pink, like so text here.

If you want to change the font colour and size, you can do this in the same tag eg:

<font size="1" color="red">type text here</font>
This would make the text small and red, like this: type text here.

Background colour
If you want to make your page more interesting, you can change its background of the page. Background colour works in much the same way as font colour, except it affects the whole page. Normally, backgrounds are white (FFFFFF) or black (000000), but you can use any colour you wish. To change your background colour, simply type this near the top of your page:

<body bgcolor="#FFFFFF"> or <body bgcolor="white">

You do not need to end this tag, since it affects the whole page. It is good practice to put </body> at the bottom of your page to keep things tidy, though.

Background colour in shops
You have to do your background colour slightly differently in your shop. There are two ways of making this change. The first method is to use a background image. Type:

<body background="http://images.neopets.com/backgrounds/tm_chombybk.gif">

at the beginning of your shop's description, and that image will be tiled as the background for your shop. You can find several Neopets backgrounds to use here. Alternatively, if you want a solid colour, or want a coloured background only in a certain area, you need to use a table. The simplest table would be to type this is your shop description :

<table background="http://images.neopets.com/backgrounds/tm_chombybk.gif">
 or
<table bgcolor="red">
followed by
<tr><td>
Type your text here as usual, and then finish your table by typing the two lines below.
</td></tr>
</table>

Don't forget to include the last two lines, or your table will be broken. Now you should be able to put a background colour or image in your shop :) If you wish to position the table in the centre of your page, simply add the words align=center after <table , for example <table align="center" bgcolor="red">.

Go to Previous Lesson Go to Next Lesson