Cascading Stylesheets Tutorial #9

Colors, Background Colors and Background Positioning.

Color

Example code ....
<STYLE TYPE="text/css">
<!--
b { color: 63639C }
-->
</STYLE>

Color uses the same values as html and what happens is that you actually specify the "foreground" color of the text.

The example code has been applied to all bold text on this page.

You can use all browser safe colors such as black, blue, green, etc, or you can use hexidecimal color codes. When using hex color codes you do not have to use the # sign, just the color code such as 63639C Click here for a hexidecimal color chart

You can also use RGB colors, which are used in graphics applications such as Photoshop and Paint Shop Pro.

Background Colors.

Example code ....
<STYLE TYPE=text/css">
<!--
H4 { background-color: FFFF66 }
-->
</STYLE>

Here's where CSS get's exciting. Usually, to put color behind an element using html, you would have to make a table cell and fill the cell with color, or make use of the span tag every time you wanted to have the color behind text. Now here's a much easier way using css.

The example code was used in each part of this paragraph, and you can apply it anyhow you wish. To full paragraphs or just a single letter.

You can use color names, hex colors or RGB codes.

You can also apply the background-color property a value of transparent. This means that the background any inherited background color is ignored and you'll see whatever background would normally show through.

background-image

Example code ....
<STYLE TYPE="text/css">
<!--
H4 { background-image: url(images/hypermouse.gif) }
-->
</STYLE>

Click here to view an example

That's the example code at work above, applied only to that paragraph. You can apply a background image to just two words, or if you want to apply the background image to all of your document, place the code within the body tag like this
BODY { background-image: url(images/hypermouse.gif) }

You can call the image using the relative url or you can use the full path such as; http://www.hypergurl.com/images/hypermouse.gif

If you are using a transparent gif you can use also specify background color. The background color will appear while the graphic is loading and show through any transparent regions of the gif.

Controlling Background Images

Example code ....
<STYLE TYPE="text/css">
<!--
H2 { background-repeat: no-repeat; background-image: url(images/hypermouse.gif) }
-->
</STYLE>

This is an example of the above code in action. As you can see I have set the graphic to appear on the left. Some browers will render this differently so play around to get it to suit. This is a really great way to place an image behind a paragraph of text and control everthingto your liking. There is much motre to css than just controlling font types and the favorite no underline on links.

As you can see with the code, I have applied a background image, a background color behind the image, applied the no tiling command and centered the image vertically and horizontally. This is the best way to code your backgrounds and is much more browser friendly.

Fixed Backgrounds.
If you want your background fixed, or not to scroll with the page, use the background-attachment like this to the body tag.

<STYLE TYPE="text/css">
<!--
BODY { background-attachment: fixed; background-image: url(images/hypermouse.gif) }
-->
</STYLE>

Next CSS tutorial ... Absolute and Relative Positioning.