You can change the size of your text at any point by putting in a tag like this : <FONT SIZE=n>, where n is a number between 1 and 7. The text will change to the size you specify, until you turn the effect off again with the </FONT> tag.
With the glorious logic that so often afflicts computer systems, these numbers work exactly the opposite way round to the numbers used in creating headings (<H1>, <H2> and so on): that is, size one is teeny and size seven is huge. Marvellous.
A better way to use the SIZE attribute is to put +1, +2, -1 or -2 instead of the number, like this <FONT SIZE=+1>, which makes the text one size bigger, and again is turned off with </FONT>. +2 makes it two sizes bigger, -1 makes it one size smaller, and so on.
Why is this better? It's this matter of different browsers displaying things differently again. Exactly how big a particular font size will display on someone else's screen depends on all sorts of factors over which you have no control, mostly how their browser and computer are set up. For example, a size 1 sentence might look OK on your machine, yet be so small you can't read it on someone else's.
If you don't specify a font size at all, your text will be size 3. I think size three often looks a little small at the default setting, so on most pages (including these) I use a cousin of <FONT>, <BASEFONT>, right at the beginning of the <BODY> section. <BASEFONT SIZE=4> changes the default font size from 3 to 4. <BASEFONT> works exactly like <FONT> except that it doesn't have an "off" tag, and you only use it once per page. Why do I do this, when I just implied that fiddling with the font size is not necessarily a good idea? Well, it amounts to : "it's my website and I'll do what I want", to be honest. I like big writing, it's easier to read, especially if there is a lot of it.
It may have occurred to you that you could perhaps change the font size by just putting <FONT SIZE=3>, blah blah, <FONT SIZE=4>bigger blah and so forth throughout your webpage, never using </FONT> at all. That does in fact work for some browsers : the very first webpages I created I did exactly that, because I didn't know what I was doing. But it's more likely to look the way you intended on a visitor's browser if you use it the way it was designed to be used.
Another thing you can do with the <FONT> tag is change the text color, as I just did there. The tag is <FONT COLOR=n> (note the spelling - "colour" won't work), where n can be several things. The easiest way to use it is to put in the name of a colour, so <FONT COLOR="blue">turns text blue, <FONT COLOR="green"> makes it green and so on. The quote marks are optional, and it recognises the names of most common colours (if you want to use grey, spell it "gray"). Like with FONT SIZE, you turn it off with a simple </FONT>.
If you are feeling more adventurous, you can replace the n with a # followed by a six digit hexadecimal (base 16) number, something like this <FONT COLOR=#C850A5>, (which produces this colour). All colours on a screen are made up of a mixture of red, blue and green : the first two digits are the amount of red, the next two the amount of green, and the last two the amount of blue. (Some of the digits are letters rather than numerals because base 16 requires more numerals than base 10, so is written 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 etc, with "10" being equal to 16, "11" to 17 and so on - bet you're sorry you asked). This gives you a much greater range of possible colours, but is not easy to use unless you are comfortable with hexadecimal numbers. Fortunately, any half-decent HTML editor will let you pick font colours from a colour chart, and translate them into hexadecimal for you, and anyway invoking colours by name is fine for most purposes.
Whatever you do, don't get too carried away with too many changes of colour. A little colour goes a long way. Come to think of it, the same applies to changes of size, too.
You can combine a change of size and colour into one <FONT> tag : for example
<FONT SIZE=+1 COLOR="purple">, which produces an effect like this. The advantage of combining a colour and size change into one tag is that you turn both effects off together with a single </FONT>.
The third <FONT> attribute is FACE, where you change the typeface (often called a font, which is where the tag gets its name) in which the browser displays text. For example, to change the typeface to Arial you could put : <FONT FACE="Arial">. (If your system has a font called Arial, which is one of the most common, that last sentence should have been in it). However, there is an enormous drawback to this. If the visitor's system doesn't have a font called pretty much exactly that, the FACE attribute will be ignored, and unfortunately everyone has wildly different fonts installed on their systems. The result of this is that <FONT FACE> hardly ever works as you intended, so most of the time you might as well not bother. To try and get around this, you can specify a list of different fonts separated by commas with the FACE attribute, instead of just one, and it will use the first one it finds a match for on the visitor's system. If it finds one at all. Usually it isn't worth the hassle.
You can combine FACE, SIZE and COLOR into one <FONT> tag, something like this <FONT SIZE=+1 COLOR="green" FACE="Arial">, which on your browser looks like this. If the typeface you specified isn't available, the FACE part is ignored, but the colour and size change will still work. As before turn the whole thing off with a single </FONT>.
Incidentally, do bear in mind that each </FONT> only turns off one <FONT> tag (the most recent one that hasn't already been turned off), so if you change the SIZE and COLOR of some text with two separate tags instead of combining them into one, you need to put two separate </FONT> tags to turn both effects off. This can sometimes be very useful if you want to change the colour and size of some text independently.
One thing I haven't mentioned so far is setting a colour for the background of your page. You do this by adding an attribute to the <BODY> tag, back at the beginning of the page. The attribute is BGCOLOR, and it uses exactly the same colour code system as <FONT COLOR>. So with this added, your <BODY> tag would look something like this :
<BODY BGCOLOR="yellow"> (for example).
(Or you could replace "yellow" with a hexadecimal code, exactly the same as with the FONT SIZE attribute).
Another attribute you can add to <BODY> is TEXT, which sets a default colour for any text not coloured by a <FONT COLOR> tag. So to make the background black and the text white (see www.jonstorm.com for an example), the <BODY> tag would look like this : <BODY BGCOLOR="black" TEXT="white">, or <BODY BGCOLOR=#000000 TEXT=#FFFFFF> using hex codes.
Whether you change the text colour, the background colour or both, make sure you pick a combination that is visible! If you change the background colour to black and forget to change the text colour to something else, you will get black on black - bad idea.
There are several other attributes you can use with the <BODY> tag, mainly to set what links look like : we will go into that later on, in the section on links.