How do I make custom bullets?

You can redefine the ul, or unordered list, tag, which controls lists. In your CSS document, type:

ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}

This gives you a clean slate and eliminates any indentations a browser might apply to the list.

Now you’re ready to add your bullets. For this example, I’ll assume that I have an image called mybullet.gif in the same directory as the CSS file.

In HTML, each item in a list is represented by the li tag. To change its appearance, add this to the style sheet :

li { background: url(mybullet.gif) left center no-repeat }

Now, whenever an li tag pops up, the browser will place the image at the left edge of the list item. To more accurately position the bullet, you can replace left center with pixel values.

At this point, the text for each list item will appear directly over the bullet. To insert a little breathing room, simply add padding to the left side of the li item. For example, if the graphic is 10 pixels wide, 15 pixels of padding should suffice. If the list items are stacked too close together, increase the top or bottom margins. Your final rule would look like this:

li {
background: url(mybullet.gif) left center no-repeat;
padding-left: 15px;
margin-bottom: 10px;
}