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

Step 4

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 text, likewise if you want to display it in italic you can use the italic tag text.

In your web browser a text will appear then like:

Font size, type and colour:

The font tag text 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. this is my text
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:
this is my text

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:

this is my text

And your browser displays the text as:

Exercise:

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.
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!)
Make a few words or phrases in your text bold or italic.

Your web page should now look similar to this example.
Congratulations! You have successfully completed step 4 and can move on to step 5.

Step 5