Using and Customizing Bullet Points

This tutorial will teach you how to customize your bullet points so they don't look like the boring circles, and how to create lists with bullet points correctly.
I will be using this bullet image that I made. (Find more bullets on the pixels page.)

First, you have to put the following into your CSS.

ul {
list-style-image:url('LINKHERE');
padding-left: 15px;
margin: 0;
}
Where it says url('LINKHERE'), replace "LINKHERE" with the link of the image of the bullet. Since I'm using this image as an example, I would replace "LINKHERE" with "http://i25.tinypic.com/29di9zm.jpg", like so:
ul {
list-style-image:url('http://i25.tinypic.com/29di9zm.jpg');
padding-left: 15px;
margin: 0;
}

Now we're ready to create a list with bullets. You must always start a list with <ul> and end it with </ul>. For each bullet point, you must always begin with <li> and end it with </li>. If you were to create a grocery list, you would code it like so:
<ul>
<li>Eggs.</li>
<li>Milk.</li>
<li>Granola Bars.</li>
<li>Apples.</li>
<li>Spinach.</li>
</ul>

The following is how the list should look like:

Voila! You now know how to customize and create a list with bullet points.

Don't understand something? Feel free contact me or ask any questions! You can also request a tutorial here.