Colorizing with CSS

You have seen how CSS can set the color of text, but did you know that you can set background colors and images, too?  With CSS, you can place an image behind any element on the page. This page has a background image.  This is the rule:

body

{ background-image: url(images/flwr.jpg); background-repeat: no-repeat; }

When setting a background image, you have four options;

• repeat:  The image is repeated both horizontally and vertically.
• repeat-x:  The image is repeated horizontally only.
• repeat-y:  The image is repeated vertically only.
• no-repeat:  The image is not repeated: only one copy of the image is drawn.

Here we have chosen no-repeat, so the image will only be shown once.  When you specify a background image, it's a good idea to also specify a background color using the background-color property. This solid color will appear while the image loads, and will show through any transparent regions of the image. It will also be the color shown in the background of browsers such as IE3 that do not support the background image STYLE.  You can also specify a background image for just a paragraph or a table, but Netscape and IE4 for Macs doesn't support this well. 

How do you put a color behind a paragraph?  Using an inline STYLE.  You can use any of the values shown below: color names, hex numbers, or RGB values.  Here we have used both #ffff66 and yellow.  

You don't have to color the background of an entire paragraph. You can put color behind just one word if you want.  Here is what the code looks like:

<p style="BACKGROUND-COLOR: #ffff66">How do you put a color behind a paragraph?&nbsp; Using an inline STYLE. &nbsp;&nbsp;You can use any of the values shown below: color names, hex numbers, or RGB values. &nbsp;&nbsp;Here we have used both #ffff66 and yellow.</p>

<p>You don't have to color the background of an entire paragraph. You can put color behind just one <span style="BACKGROUND-COLOR: yellow">word</span> if you want.&nbsp; Here is what the HTML code looks like:

What's with the dog?  That's Daisy!  She is taking the place of a round bullet on this page because of this line in the css:

ul {list-style-image: url("images/daisy.gif")}

What is SPAN?  SPAN is used to identify a group of text so you can apply an inline STYLE.  

Notice the color definitions we used this time.  The standard 16 colors defined in HTML 3.2 and 4.01 and correspond to the basic VGA set on PCs.   Decimal R,G,B sets the value for Red, Green and Blue in each color.  (Need more colors?  Click here for a really pretty chart.)  They are: