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?
