Mantex

Tutorials, Study Guides & More

  • HOME
  • REVIEWS
  • TUTORIALS
  • HOW-TO
  • CONTACT
>> Home / How-to / How-to guides / HTML Tutorial 06 – adding colour

HTML Tutorial 06 – adding colour

November 22, 2009 by Roy Johnson

1. The default background colour of a web page is grey – which is not very exciting.

2. That is, grey is the colour which will show in a browser window unless you tell it to do otherwise. Web design guru David Siegel says that web pages such as this are – “like slide presentations shown on a cement wall”.

3. There are three easy ways to add colour to your pages:

  • use FONT COLOR for text
  • use BACKGROUND COLOR for the page
  • use a graphic for a ‘background wallpaper’ effect

4. Let’s look at each of these options in turn.

The font colour tag

5. When you specify the FACE or SIZE of your FONT, you can also say what COLOR you want it to be.

<FONT=”Arial COLOR=”RED”>my web pages</FONT>

This would produce the following effect.

The words ‘my web pages‘ are coloured red.

6. Other common colours are as follows.

Aqua – Fuchsia – Olive – Green – Lime
Blue – Maroon – Teal – Navy – Purple

Background colour

7. Background colour can be used to give colour to a page.

8. The code is inserted into the <BODY> tag at the top of your page. Notice that the term ‘background’ is abbreviated to BG.

<BODY BGCOLOR=”AQUA”>

9. The problem with most of the standard colours is that they are rather strong. They are too demanding, not quiet enough.

10. It is better to choose something more quiet and restrained.

BGCOLOR=”WHITE” is always safe.

BGCOLOR=”#FFFFEF” is more subtle.

[Don’t ask! Just use “#FFFFEF”.]

11. Note that the tag must be given its American spelling of COLOR. This is a very common technical problem.

Tiled graphic file

12. You can also create a coloured background for your page by using a graphic image. This will be ’tiled’ [repeated to fill the space] by
your web browser.

14. The code goes into the BODY tag at the head of your page. Notice that in this case the full term BACKGROUND is used.

<BODY BACKGROUND=”stripe.gif”>

15. You would save the graphic file ‘stripe.gif’ in the same folder as your .htm page.

16. But a tiled graphic makes reading more difficult. It almost always results in a visually disruptive page.

17. It’s usually much better to use a single colour – one which is muted and subtle. Choose something against which black text will stand out clearly.

18. Here are a good example and a ridiculously bad example.

© Roy Johnson 2002

previousnext

 


Filed Under: How-to guides, Study Skills Tagged With: HTML, HTML tutorial, Technology, Web design tutorial

Get in touch

info@mantex.co.uk

Content © Mantex 2016
  • About Us
  • Advertising
  • Clients
  • Contact
  • FAQ
  • Links
  • Services
  • Reviews
  • Sitemap
  • T & C’s
  • Testimonials
  • Privacy

Copyright © 2025 · Mantex

Copyright © 2025 · News Pro Theme on Genesis Framework · WordPress · Log in