Replacing bullets with custom graphics

Granted the built in options for styling an ordered list aren't much. …Luckily however, there's a number of ways we can spice things up with custom …markers. In this lesson I'll show you two …different techniques. One, dead simple and another a bit more …complex, but with more control. First, let's look at the pure CSS single …property solution, list style image. As the name implies, the property will …swap out the default marker, the bullet, for whatever image you specify.…

As you can see by looking at line 44, I've added an ID of listStyleImage to my …UL tag to make it easier to handle the CSS. …Let's switch now to the CSS file. Here, near the bottom of the page,you can …see I have a section for my listStyleImage rule. …I'm just going to add the needed property and the URL value. …And that property is again list hyphen, style, hyphen, image then I'll put in the …key word URL followed by parenthesis and the path to the image, which is going to …be dot, dot, slash images slash arrow.png.…