Collected by
Elizabeth Janson
Home Page

Using Colours

  Named colours that are defined are: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, Yellow Other 'color' names are not supported by the W3C standards.Bug hiding in the colour namesIf you want to write correct CSS you should use the 'color' HEX values. Browsers are not consistent in the way they handle colour - Internet Explorer 3 does not apply backgrounds to block elements, but only to the text content.

The browser-safe HEX colour codes have pairs of 'digits' in the order red, green, blue.
The three-digit form '#f60' is converted into the six-digit form '#ff6600' by replicating digits.

 

Foreground Colour

The 'color' property changes the foreground colour of a section, which is usually text. So, to change the 'color' of some text:

This text is plain, <SPAN style="color:#ff6600">and this makes me think of oranges....</SPAN>, fun isn't it?

Giving -
This text is plain, and this makes me think of oranges...., fun isn't it?

SPAN is explained in section 2, page 3, SPAN.

Horizontal Lines

Try with a <HR style="color:blue">

Now try a onmouseover line
<HR style="color:red" onmouseover="this.style.color='green'" onmouseout="this.style.color='gold'">
IE5 also allows <hr color=blue>

Background Colour

The 'background-color' property will let you add a colour behind most items. You can add it to text like this:

<SPAN style="background-color:yellow">My background is yellow!</SPAN> Giving - My background is yellow!

Also, you can use this in tables:

<TABLE style="background-color:#ff9900" border="1">
<TD>AAAGH! Pumpkin Background!</TD>
</TABLE>

Getting -

AAAGH! Pumpkin Background!

And how about a form box? Of course!

<FORM>
Name:
<INPUT TYPE="text" size="25" style="background-color:green">
</FORM>

If you'd like different backgrounds with different colors, then you have to use the following:

Getting - Name:

<HEAD> <STYLE TYPE="text/css">
<!--
#col1 {background-color: #CCCCCC;}
#col2 {background color: #66FFCC;}
-->
</STYLE>
</HEAD>

<P><DIV ID="col1">
Your text here ...
</DIV>

<P><DIV ID="col2">
Your text here ...
</DIV>

Then, for one paragraph (gray background) you would use the following in the body of your document:

Your text here ...

For the other paragraph (green background), use this in the body:

Your text here ...

      000000            330000            660000             990000             cc0000            ff0000     
003300   333300   663300  
993300
 cc3300 ff3300
006600 336600 666600 996600 cc6600 ff6600
009900 339900 669900 999900 cc9900 ff9900
0000cc 33cc00 66cc00 99cc00 cccc00 ffcc00
00ff00 33ff00 66ff00 99ff00 ccff00 ffff00
000033 330033 660033 990033 cc0033 ff0033
003333 333333 663333 993333 cc3333 ff3333
006633 336633 666633 996633 cc6633 ff6633
009933 339933 669933 999933 cc9933 ff9933
00cc33 33cc33 66cc33 99cc33 cccc33 ffcc33
00ff33 33ff33 66ff33 99ff33 ccff33 ffff33
000066 330066 660066 990066 cc0066 ff0066
003366 333366 663366 993366 cc3366 ff3366
006666 336666 666666 996666 cc6666 ff6666
009966 339966 669966 999966 cc9966 ff9966
00cc66 33cc66 66cc66 99cc66 cccc66 ffcc66
00ff66 33ff66 66ff66 99ff66 ccff66 ffff66
  000099     330099     660099     990099     cc0099     ff0099  
003399 333399 663399 993399 cc3399 ff3399
006699 336699 666699 996699 cc6699 ff6699
009999 339999 669999 999999 cc9999 ff9999
00cc99 33cc99 66cc99 99cc99 cccc99 ffcc99
00ff99 33ff99 66ff99 99ff99 ccff99 ffff99
  0000cc   3300cc 6600cc 9900cc cc00cc ff00cc
0033cc 3333cc 6633cc 9933cc cc33cc ff33cc
0066cc 3366cc 6666cc 9966cc cc66cc ff66cc
0099cc 3399cc 6699cc 9999cc cc99cc ff99cc
00cccc 33cccc 66cccc 99cccc cccccc ffcccc
00ffcc 33ffcc 66ffcc 99ffcc ccffcc ffffcc
  0000ff     3300ff   6600ff 9900ff cc00ff ff00ff
0033ff 3333ff 6633ff 9933ff cc33ff ff33ff
0066ff 3366ff 6666ff 9966ff cc66ff ff66ff
0099ff 3399ff 6699ff 9999ff cc99ff ff99ff
00ccff 33ccff 66ccff 99ccff ccccff ffccff
00ffff 33ffff 66ffff 99ffff ccffff ffffff

Email
CSS begins here
Back to linking, or on to Background Images

This page is part of Elizabeth Janson's web site

http://www.geocities.com/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.

1