Click on the Logo to return to the homepage


Step 4: Formatting text: changing font type, font size and font colour

In this exercise you will learn how to change the type, size and colour of your text as well as to display text in bold or italic.

Bold & italic:

If you want do display text as bold in your web page you can use the bold tag <b>text</b>, likewise if you want to display it in italic you can use the italic tag <i>text</i>.

In your web browser a text will appear then like:

Font size, type and colour:

The font tag <font>text</font> plus attributes is used to change the font size, font type and font colour.

For the font size you can choose a value between 1 and 7, normal font size is 3. The value is added next to the font tag under quotation marks, e.g. <font size="3">this is my text</font>
Only the font tag itself nees to be repeated in the source code.

You can change the font type by adding the attribute 'font face' to the tag. Common font types are Times Roman, Arial, Courier, Verdana, Georgia.

If you want to display your text in e.g. Verdana the syntax will look as follows:
<font face="Verdana">this is my text</font>

Finally, you can also change the font colour by adding the attribute 'font color' (mind the American spelling!) and type the colour name. Colours recognised by web browsers are: red, yellow, green, blue, aqua, silver, white, black and a few more.

If you want to display your text e.g. in Verdana, size 2, red the syntax in your editor would look as follows:

<font size="3" font face="Verdana" font color="red">this is my text</font>

And your browser displays the text as:


  1. Add the tags so that your resume heading will be displayed as Verdana, size 5, red. You have to delete the <h2> tags for this.

  2. Add the tags so that your resume text is displayed as Verdana, size 3, black (note: black is set per default - hence you do not have to add the colour attribute to the tag!)

  3. Make a few words or phrases in your text bold or italic.

Here you can see the source code for formatting text

  1. Your web page should now look similar to this example.

  2. Congratulations! You have successfully completed step 4 and can move on to step 5.

Copyright: Christian Maurer