Local Style Page Coloring

This page will give you some examples of how to use local styles to set the color and/or background color and image of various elements of your web page.

The style Attribute

The attributes we have used so far have been simple attribute and value pairs such as align="right" and so on. The style attribute incudes a bit more information. In the style attibute, you may define several parameters at once.

The attribute style may be added to any tag; in some though (like a break tag), it makes little sense. For elements like the body, paragraphs, headings, and others, the style attribute allows you to affect their colors, among other things. Using the style attribute is the simplest form of using Cascading Style Sheets. In this case, it is referred to as a "local style."

background-color

You have most likely noticed by now that the default background color of most web browsers is white. Netscape 4.x is gray (at least on the Mac). One way to change this color is with a local style in the body tag. It looks like this:

<body style="background-color:color_value;">

The color_value may be defined in ways.

  1. WIth the sixteen seventeen predefined color names which are are: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, and aqua, and orange.

    <body style="background-color:fuchsia;">

  2. By using a hexadecimal number; preceded by a hash (#).

    <body style="background-color:#ff00ff;">

  3. As an expression of red, green, and blue; or rgb in values from 0 to 255.

    <body style="background-color:rgb(255,0,255);">

  4. As an expression of red, green, and blue; or rgb in percentages.

    <body style="background-color:rgb(%100,0%,100%);">

These four ways of specifying color values may be used with other definitions in the style attribute.

The background-color definition may be used in other elements like paragraphs, headings, tables, and so on. If you want the element to have a transparent background, use background-color:transparent; if you wish it to inherit the background color, use backgroun-color:inherit.

color

color is used to define the foreground color of an element. For elements such as headings, paragraphs, and lists, that is the text. If you have specified a dark background color, you will need to make the text lighter for good contrast and optimum readability.

<p style="color:green;">

The code above is used to make the text in this paragraph green.

Combining color and background-color

You may wish to specify both color and background color for some elements such as headings or paragraphs like this one. The paragraph tag code for this one is shown below.

<p style="color:lime;background-color:black;">

Note the syntax with these style definitions; the definition is separated from its value by a colon; definition/value pairs are separated by semicolons.

background-image

Use the background-image definition when you want to have a background image behind the foreground portions of an element. As with other web images, use .gif or .jpg files for these background images. This is a very common use for the body tag.

<p style="background-color:color_value;background-image:url(path_to_image_file)">

Note the use of both background color and image. This is a good idea for redundancy purposes; if your background image is dark, set a similar background color so your text will show while the background image loads. It will also protect your user if they have images turned off or if the image file is somehow corrupted.

Background images will normally start at the upper left corner of the element and repeat (or tile) throughout the element. Background images will usually scroll with the page as well. All of these defaults may be changed; I will leave it to you to discover how in your book.

bottom graphic for DM 60A pages