Join Joseph Lowery for an in-depth discussion in this video Replacing bullets with custom graphics, part of CSS: Formatting Visual Data.
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.…
Released
3/27/2013- Adding custom number characters to lists
- Managing hanging indents
- Styling nested lists
- Understanding definition lists
- Highlighting table content
- Creating alternating row colors (zebra stripes)
- Building bar graphs and pie charts
Share this video
Embed this video
Video: Replacing bullets with custom graphics