CSS has several options for defining colours for both the text and any background areas.

These options can entirely replace the colour attributes in plain HTML. In addition, you get new options not found in plain HTML.

For example in HTML if you need to create an area with a specific colour, you were forced to include a table. With CSS you can define an area to have a specific colour without defining a table.

Even more useful, with HTML when working with tables, you needed to specify font attributes and colour etc. for every table cell. With CSS you can simply refer to a certain class in your <TD> tags.

Colour Properties

Property	Values	NS	IE
color	<color>	4+	4+
background-color	transparent <color>	4+ 4+	4+ 4+
background-image	none url(<URL>)	4+ 4+	4+ 4+
background-repeat	repeat repeat-x repeat-y no-repeat	4+ 4+ 4+ 4+	4+ 4+ 4+ 4+
background-attachment	scroll fixed		4+ 4+
background-position	<percentage> <length> top center bottom left right		4+ 4+ 4+ 4+ 4+ 4+ 4+
background	<background-color> <background-image> <background-repeat> <background-attachment> <background-position>	4+ 4+ 4+	4+ 4+ 4+ 4+ 4+

Setting colours

Basically you have three colour options with CSS:

1. Setting a foreground colour for contents
2. Setting a background colour for an area
3. Setting a background image to fill out an area

In HTML colours can be specified either by one of the 16 predefined colour names (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow) - list of colours is here

or by a hexadecimal colour code (for example: #FF9900).

With CSS you have these options:

Common name:  specify colours with the use of common names, enter the name of the desired colour.

For example:

.myclass {color:red; background-color:blue;}

Hexadecimal value:  define colours with the use of hexadecimal values, similar to the method used in HTML.

For example:

.myclass {color:#000000; background-color:#FFCC00;}

RGB value:  define colours with the use of RGB values, by simply entering the values for intensity amounts of red, green and blue.

For example:

.myclass {color:rgb(255,255,204); background-color:rgb(51,51,102);}

You can also define RGB colours using percentage values for the amounts of Red, Green and Blue:

For example:

.myclass {color:rgb(100%,100%,81%); background-color:rgb(81%,18%,100%);}

Setting background colours

Background colours are defined similar to the colours mentioned above.  You can set the background color of the entire page using the BODY selector:

BODY {background-color:#FF6666;}

Setting a background image

With CSS you can set a background image for both the page and single elements on the page.

In addition, CSS offers several positioning methods for background images.

You can define the background image for the page like this:

BODY {background-image:url(myimage.gif);}

You can control the repetition of the image with the background-repeat property.

background-repeat:repeat -- Tiles the image until the entire page is filled, just like an ordinary background image in plain HTML.

background-repeat:repeat-x -- Repeats the image horizontally - but not vertically.

background-repeat:repeat-y -- Repeats the image vertically - but not horizontally.

background-repeat:no-repeat -- Does not tile the image at all.

Positioning a background

Background positioning is done by entering a value for the left position and top position separated by a space.

In this example the image is positioned 75 pixels from the upper left corner of the page:

BODY {background-image:url(myimage.gif); background-position: 75px 75px;}

Note: Background positioning is not supported by Netscape 4 browsers.

Fixing a background

You can fix an image at a certain position so that it does not move when the user scrolls down the panel on the browser.

BODY {background-image:url(myimage.gif); background-attachment: fixed;}

Note: Background fixation is not supported by Netscape 4 browsers.

Setting multiple background values

Rather than defining each background property with its own property you can assign them all with the use of the background property.

Look at this example:

BODY {background:green url(myimage.gif) repeat-y fixed 75px 75px;}