CSSPG Tips: Colors with HTML and CSS

for practical use of CSS

this document is located at...
<URI:http://css.nu/pointers/tip-3.html>

Color Considerations

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 don't, 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, strongly 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="webmaster@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        partl@mail.boku.ac.at
  ZID BOKU Wien       http://www.boku.ac.at/

CSS Pointers Navigation

Index · Browser Bugs · Books · Tools · DHTML · XSL & DSSSL

Main Site Navigation

Index · Articles · Examples · Experiments · FAQ · Markup · Styles · Who is?

CSSPG ~ Sue ~ Roland

Tips

this document is located at...<URI:http://css.nu/pointers/tip-3.html>

Color Considerations

this document is located at...
<URI:http://css.nu/pointers/tip-3.html>