Planning Your Colours

The theory and psychology of colour is a large and complex field, a full treatment of which is well beyond the scope of this site.

Having said that, using the following set of guidelines should give you pleasing results, or at the very least, results that won't offend your readers.

Use a white background with black text. White on black can be interesting the novelty soon wears off. Text in colours other than black or white should be left for links or perhaps headings. While non-white backgrounds work for special page areas such as a navigation bar they reduce overall readability when used for content.

Choose one main colour for your page. Use this in conjunction with a lighter and darker shade and you will have enough flexibility for a solid design. If you want to chose more than one main colour make sure your second colour is used sparingly ideally only as an accent colour. Wellstyled.com takes the guess-work out of this for you.

Make different sized text distinctly different. Making text sizes only a little different is confusing. To avoid visual ambiguity use a size separation of at least two for headings and a minimum of 2pt sizes for text.

Basically all these guidelines boil down to the use of contrast. Contrast is what will make your design interesting, but keep in mind that in order for it to be effective it needs to be used in moderation.

Valid XHTML 1.0 Transitional

Hypertext Reference Links

Links are at the heart of navigation and navigating between files is the heart of the World Wide Web. It is impossible to overstate their importance.

As a consequence selecting the style, colour, appearance and functioning of links is the most important design decision. It will impact almost all other aspects of your design in some way so give it due consideration.

The most important thing to keep in mind, regardless of the colours and effects you attach, is links must work and be easy to use.

  1. Open your .css file and add this link styling command:

    body { background-color: #000;
    color: #fff; }
    a { color: #0f0; }
    p.red { color: #f00; }
    span.bold { font-weight: bold }

    Open your .html file. Any links should have turned green. If you click any links then return to the page you will see that their colour is unchanged rather than changing from blue to purple (the default).

  2. Links actually have 4 distinct states each of which can be styled individually. The four states are: link, visited, hover and active. This order is significant and when defining the states individually it is important they occur in this order.

    Open your .css file and enter the following commands:

    body { background-color: #000;
    color: #fff; }
     
    a:link { color: #0f0;
    a:visited { color: #f00;}
    a:hover { color: #00f;}
    a:active { color: #0ff; }

     
    p.red { color: #f00; }
     
    span.bold { font-weight: bold }

  3. Go to your browser and open or refresh your .html file.

    Your links should have remained green or changed to red if you have visited the page the link points to. Now when you mouse over a link it should change to blue and if you click it the colour will flash cyan for a moment as the linked page is loaded.

    As with other tags there is really no limit to the amount you can style a link. A common styling of links is to make them a duller shade and remove the underlining then have them "come to life" by making the hover colour a couple of shades brighter and have the underlining appear when the mouse hovers over it. This modification would be coded as follows:

    a:link { color: #390;
    text-decoration: none; }
    a:hover { color: #0f0;
    text-decoration: underline; }

    NOTE: Heading tags are bold face by default so you will not see any change in their font weight.

  4. Another link styling technique which can be effective when used appropriately is to have the link's background colour change when hovered over.

    a:hover {color: red;
    background-color:green; }

    This is a good time to remember that just because you can it is not a requirement that you do.

  5. It is also possible to add a class to your link styling. This allows different colour schemes for your links for different parts of your page.

    Assign a class as follows:

    I use <a class="orangelink" href="http://digg.com">digg.com</a> for news

    The class is incorporated into your .css as follows

    a.orangelink:link

    Try styling a single link with a different scheme. Remember you'll need to redefine all four aspects of your link.

Next section: Styling Images →