One of the easiest things to do in a CSS style sheet is to assign colours to elements. You have just 2 properties to play with, background colour and colour (in style sheets, of course, both properties have to be spelt using American dialect spelling: an Englishman may have invented the Web, but by the time style sheets came along Americans were firmly in control).
I am not here concerned with the more complex colour effects you can get by creating a background image with the effects you want—gradients, radial bursts, stripes, and so on. I just want to make a small point about the use of colour names.
I have 2 recommendations to make, and I make them to the most talented and experienced of my fellow Web designers, because they don’t always follow them.
- Use the colour names of the 16 originally defined colours: red, green, blue, etc.. It doesn’t take long to learn them. Especially, use black and white. There is absolutely no excuse for writing
background-color: #000;.
color: #fff - Add a comment to any colours that you can only identify using hex (or RGB) values. After
color: #cf2200,
add the comment/* a red, from garden flower */,
or at least/* a red */
Anyone who has been a programmer as well as a designer knows the value of comments. In particular, they make it easy for other people to identify your colours and your reasons for choosing them, while reading your code. And they make it easier for you, when you come back to the code a few months later.
I should mention here that modern browsers know a huge array of colour names, but I am not suggesting we need to use them, except when by chance a name identifies a shade/hue that we have already chosen. It’s better to get into the habit of adding comments.
Actually, while we’re on the topic of CSS colours, I feel like passing on a practice of my own which is not so generally useful as to count as a recommendation, but which I find really useful as a designer. And here I mean designer, not coder.
I put all my colour rules—for backgrounds and borders as well as text and links— in a separate section at the end of my style sheets. This is a bit of an irritation when coding, since I have to create the other rules for a given element in another section of the style sheet. But it really pays dividends when I want to make small changes to site-wide colour schemes. The relevant values are all together, and can be changed together—sometimes in a single rule.
Why not see if it works for you?
This is the ninth in a series of rules for website design, which I began writing in
A couple of weeks ago, I completed another ‘iceberg’ Web site, in which most of the site is restricted. As part of the process, I learned how to create a complete WordPress theme (about time I got round to properly theming this blog…) and a Wiki. I chose WordPress for the blog because it has all the features my clients were looking for, and is kept up-to-date by a dedicated community. For the Wiki I tried no fewer than 3 other versions before I settled on
Recently, I have been doing a lot of Web design and development work “behind the scenes.” There hasn’t been much that I could share with readers of this blog. But around Christmas I did create a Web site that you may like to glance at—and I have finally found the time to add it to
On Monday I set the scene. We left our protagonist facing a task which all the wise men said was impossible. Fit stuff for stories.
The Web Fairy is hovering over the cradle of your new Web site. She has granted you three wishes. What do you wish for? What does every Web site need?
Is Web hosting one of those areas where “you get what you pay for”? When I suggested to someone in the