List

List can be very useful to a website. By using some CSS, you can create a nice frequently asked questions page for your site, or even a menu for your site. Let us look at some of the additional controls that CSS gives us with list.

List-Style

List-style is the shorthand way of setting all the attributes for a list.

List-Style-Image

The list-style-image allows you to use your own image as the bullet in a list. To use this attribute you have to define where the image is located at. Below is an example of what the attribute would look like.

list-style-image: url('list_dot.gif')

List-Style-Position

This attribute defines where the bullets will be displayed. The best way I can describe how this attribute works is to imagine a line when you create a list. This attribute determines what side of the line the bullets at on. If you set the attribute value to inside, then the bullets are on the right of the line. The only other value that can be set is outside, and this sets the bullets on the left side of the line.

List-Style-Type

List-style-type attribute allows you to change the style of the bullets in your list to some of the additional bullet styles that are "built" into CSS. There are multiple values that you can use. Below is a list of each one.