When writing any content particularly for web consumption, bullet points are really handy. They help break up your text a bit if they article is very long. They also give people a quick focus point. But have you looked at your bullets and thought they looked a little… blah? Here’s some code you can use to pretty up your bullets.
Circle Bullets
1 2 3 4 5 | <ul style="list-style-type: circle;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> |
Square Bullets
1 2 3 4 5 | <ul style="list-style-type: square;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> |
Lower Roman Numerals Bullets
1 2 3 4 5 | <ol style="list-style-type: lower-roman;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> |
Image Bullets
This one is just a tad more work, but you can have visually stunning bullets with images.
1 2 3 4 5 | <ul style="list-style-image: url('0136_fat_arrow.png');"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> |
Arika February 27, 2008
Cool thx Lynette…I get tired of the same old boring bullets.
Lynette February 27, 2008
I know it Arika. I’ve been having a lot of fun with CSS and nice funky bullets. Now, the plain old dotted bullets look so boring to me I have to change them.
Kelly February 28, 2008
Thank you Lynette! I can really use this!
Lynette February 28, 2008
You’re welcome Kelly.