Beginning HTML - Home
Introduction - What is HTML, What it can do, what you'll need, etc. The Basics - First steps in HTML. Moving On - Further concepts. Advanced - More advanced ways to use HTML. Glossary - Explanation of terms used in this site HTML Tag and attribute reference - look up the most popular tags and their common attributes for reference
Square The Basics
square What are tags?
Square Making a first page
Square Basic formatting
Square Fonts-color and size
Square Styling your text
Square Writing 'good' HTML
Square Adding comments
 
How to set the color of all the text in a page
How to change the color of some text
How to change the size of some text
How to change the font of some text
Putting it all together

How to set the color of all the text in a page

The color of the text in the page is set within the <body> tag. It uses the 'text' attribute. For example, if we wanted the color of the text to be red, we would write -
<body text="red">
This then makes the default color for the text on the page red. We can still change the color of text on the page, as we'll see below.

How to change the color of some text

To change the color of a section of text, we use the <font> tag. One of the attributes of this tag is color. By placing some text between the opening and closing tags, we change the color of it. For example, supposing we want a section of text to appear in a green color, we simply use -
<font color="green">
to begin the section, and
</font>
to end it. So any text in between will appear green when we view the page. Like this. Or red.Or silver.

How to change the size of some text

To change the size of some text, we use the same tag as we would if we were changing the color - the <font> tag. Instead of using the color attribute we use the size attribute (surprisingly!). To set the font size, you need to choose a size between 1 and 7. 7 is the largest size. Size 3 is the size of text as default (i.e. if you don't specify a size).
So, to make some text appear in size 5, we'd use the following code -
<font size="5">
To begin, and then have any text we wanted that size afterwards, followed by
</font>
Which closes that tag and makes any text after it appear in the normal size.

Another way to change the size of text is, instead of using a number, like 5, you can use + or - a number. Let's say we have a section of text and we'd like it to be one size bigger than the rest of the page. We can do this easily, again using the <font> tag, e.g. -
<font size="+1">
Followed by the section of text, and then closed with -
</font>
You could also make the text smaller, using similar code -
<font size="-1">The text goes here</font>

How to change the font of some text

Text on a web page is displayed in the font called Times New Roman as standard. If you don't like this font, or you'd like to display a section of your page in a different font, you need to use the <font> tag again, this time using the face attribute. Try to keep to the following fonts in your pages - Times New Roman, Arial, Verdana and Courier, as other users might not have other fonts installed, which means your page won't be displayed as you intended it.
For example, let's say we'd like a section of text displayed in the Arial font. We'd place the text we'd like to change within <font> tags, like this -
<font face="arial">
With the text here
</font>
If you're using a font and you're not sure all other users will have it, you can specify other choices. Let's say we'd like to use the Fantasy font. If the user hasn't got that font on their system, it will be displayed in plain old Times New Roman. We can avoid this by placing other choices after 'fantasy' in the tag, e.g. -
<font face="fantasy,Verdana,Aria,Helvetical">
- What happens here, is if the user doesn't have the Fantasy font installed, the browser then checks for the Verdana font. If the user doesn't have that installed, it checks for Arial, then finally Helvetica.

Putting it all together

We've looked at the color, size and face attributes of the <font> tags. All of these attributes can be used together, if needs be. For example, let's say we'd like to have some text that's red, size 5, and in the Verdana font. We'd use the code -
<font color="red" size="5" face="verdana;"
The text would go here
</font>

OK, so now you can change the appearance of the text on your page - you can change the colour, size and face of the text, and make it visually more appealing. We've just got one more section on styling text before we move on.

TopTop of page - BackBack to Basic formatting and structure - Next - Styling your fonts/textNext

Introduction - The Basics - Moving On - Advanced - Glossary - Reference