Replacing bullets with custom graphics


show more Replacing bullets with custom graphics provides you with in-depth training on Web. Taught by Joseph Lowery as part of the CSS: Formatting Visual Data show less
please wait ...

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, d...

Replacing bullets with custom graphics
Video duration: 4m 21s 1h 37m Intermediate

Viewers:

Replacing bullets with custom graphics provides you with in-depth training on Web. Taught by Joseph Lowery as part of the CSS: Formatting Visual Data

Subject:
Web
Software:
CSS
Author:
please wait ...