How to add color to an HTML web page

2 of 3

by Eugene Teslya

Created on: November 26, 2009

You wrote your first html page and now thinking to add some color to spice it up? It's fairly simple coding task; the hardest part is not to go overboard with it. Beware of the beginner's curse - the harder the one is trying to make a web page look professional, the more amateur it appears. Amateur web developers tend to place on a front page everything they can do; professionals - only what is needed.

Now, add these lines into your <header>:

body { background-color: #0d0c4e;

color: #ffffff; }

a { color: #f74320; }

</style>

Copy this line to the <body>:

How do you test links? <a href=#> Click here! </a>

Before you continue painting your page in experimental palette, you should decide on two things. First what are your "corporate colors"? Second, having in mind the web site objectives, what page elements do you anticipate?

Corporate colors are the distinguished set of colors that are strongly associated with your brand, company, product or web site. There are usually three colors or less. Their combination, ideally, is unique and either pleasant or, on a contrary, obscure, attention grabbing but never dull.

Next - your page elements list. If you'll try to describe your web page in words, everything you mention (header, banner, links, text body, title, sub-title, menu bar, submit button, advertisement, sign up sing, etc.) are your elements, each has its own role. Since all items cannot be equally important (you may try to make all of them standing out - in result, none of them will), you will have to prioritize them and assign appropriate colors.

All these preparations will save you a lot of time down the road and prevent situation when you ran out of all attention grabbing colors before you started adding a vital material.

Now, let's color that page. In out previous example we used Cascading Style Sheet (CSS), it is preferred way, which allows you to keep all color settings in one place, it will save you a lot of time when you decide to change something across entire web site.

In a similar matter you can add color to most html elements:

Add to the <style>:

h1 {color: #f74320;}

table { background-color: #dc39d2;}

td {color: #51f4fa;}

Copy to <body>:

<h1> Welcome to my page </h1>

If you wish to change a color, but don't have a Photoshop installed - use this resource: www.w3schools.com/Html/html_colors.asp.

Another useful tool is Adobe Kuler - a great place to experiment with color variations.

These tips will get you started on a colorful road, where it will lead you is up to your imagination, don't be afraid to color outside of the lines.

Learn more about this author, Eugene Teslya.
Click here to send this author comments or questions.

Below are the top articles rated and ranked by Helium members on:

How to add color to an HTML web page