Colors in HTML
Hubert Partl
For a longer version in German, see
http://www.boku.ac.at/htmleinf/hein52.html#color
Here is a short version in English:
Colors in HTML
Generally, it is best to let each reader choose those text and
background colors that look best to his eyes on his computer
screen and to his personal tastes and customs. If, however, you
as the author wish to use certain colors for certain purposes,
then you should consider the following practical hints:
* If you define a text color, always define a contrasting
background color. If you dont, then for example a user who
has set his screen to white-on-blue might end up getting blue
text on a blue background.
* If you define the color for some parts of the text, define
fitting colors for the rest of the text, too.
* Do not use all the 16 millions of different colors that can
be expressed with the #rrggbb scheme, but only those 216
colors that are constructed from combinations of the hex
values 00, 33, 66, 99, CC, and FF, which will be rendered
well on most color screens (the "Netscape color cube").
* Do not forget to use additional markup like <strong> or <em>
for those cases where readers will not be able to see the
colors - either because their browsers or printers do not
support all the colors you want, or because they are
colorblind.
Here is an example how you should combine the old standard tags <em>
and <strong> with the new standard tags <font> and <body> and with
style sheets such that you will achieve the desired effect on the
highest number of browsers.
Let us assume that you want your company's name to appear in blue
and boldface, stronlgy emphasized, and that as contrasting colors
you choose white for the background, black for normal text, and
dark red for hypertext links.
In your HTML file "enzian.html", you use the following combinations
of tags:
<html>
<head>
<title>Big Enzian</title>
<link rev=made href="webm...@www.enzian.com">
<link rel=stylesheet href="enzian.css" type="text/css">
</head>
<body text="#000000" bgcolor="#FFFFFF"
link="#990000" vlink="#660000" alink="#FF0000" >
<h1 class=enzian><font color="#0000FF">Big Enzian</font></h1>
<p>
The company
<strong class=enzian><font color="#0000FF">Big Enzian</font></strong>
is the best ...
</body>
</html>
The corresponding style sheet file "enzian.css" contains the following
specifications:
BODY { color: black; background: white }
A:link { color: #990000 }
A:visited { color: #660000 }
A:active { color: #FF0000 }
.enzian { color: #0000FF; font-weight: bold }
Note that it is better to use an external style sheet file, referenced
in the <link> tag, rather than using <style> and </style> tags within
the HTML file itself, since the embedded style specifications might
erreanously be rendered on the screen by some non-standard-conforming
browser versions like Netscape 1.x.
--
Hubert Partl pa...@mail.boku.ac.at
ZID BOKU Wien http://www.boku.ac.at/