CSS List Properties - Templates Lesson

List properties are the final group covered in this lesson. Hang in there!!

List properties are only used to control the content of a list.

List properties

• list-style-image
• list-style-type
• list-style-position

I will demonstrate the first property

I add the "list-style-image" to the LI selector and enter a value of url open parenthesis "fish-list.gif" and close the parenthesis.

LI { background-color:ffcccc; list-style-image:url(fish-list.gif);}

As I view the file in my browser tiny fish now appear with each list item. The bullets have been replaced by images. However I don't really like the effect. The images are not transparent so the white box shows.

2 possible solutions:

1. remove the background-color style

LI {list-style-image:url(fish-list.gif);}

Now the white pixels in the fish image is not a problem

2. keep the background-color property in place and use a transparent image. I have created a graphic fish-list-tr.gif which I now enter as the value for the list-style-image

LI { background-color:ffcccc; list-style-image:url(fish-list-tr.gif);}

In this case the color remains and the fish turn red

OK lets take one final look at the 3 products pages and review the various styles we have used.

original Huma

Huma + font properties

Huma + font and text properties

Huma + font + text + color properties

Huma + font + text + color + box properties
background image, left margin 1 inch
no background image, right margin 1 inch

Huma + list properties
only works in IE

here is the final version of the "mystyles.css" file

---

BODY{ background-color:ffffff; background-image:url(fish-back.gif); margin-left:1.0in; font-family:Arial, Helvetica, sans-serif; font-size: 12px; }

P IMG {padding-right:0.25in;}

P {text-align:justify;}

LI { background-color:ffcccc; list-style-image:url(fish-list-tr.gif);}

H4 { font-style:italic; text-decoration:line-through;}

H4 B {color:993300; text-decoration:none; font-weight:bold; font-style:normal; font-size:150%;}

TD { background-image:url(aqua-blend.jpg); background-color:66ccff; font-family:Arial, Helvetica, sans-serif;}

H3 { background-repeat:no-repeat; padding-top:40px; background-image:url(fish-blend.jpg);}