Custom Bullet Points – HTML Tutorial #1

Getting tired of the same ol’ black dots? Change that NOW! Put this code into your stylesheet(put image URL where is says IMAGE URL):

li.newbullet {
list-style-image:url(IMAGE URL)
}

If you don’t use stylesheets, use this code:

li.newbullet {
list-style-image:url(IMAGE URL)
}

After, you put this code where you want the bullet to show up(If you want to add another bullet, put the ‘stylesheet BULLET code’ one more time. Change the new bullet name to something like bullet2. For the second code, you need to change the name too!) :

<li class=”newbullet”>

My reason for this creation was after stumbling across Twiddy’s website and how they stylize their bullet points. Last weekend, I found myself booking my friends hen party out in the outer banks. As you all probably know, outer bank rentals run pretty expensive; but luckily I’m on a party of 22 girls who are all gracefully splitting the costs – making it affordable. I was recommended Twiddy by a friend who had used them before, and I actually found them really easy to use.

It was on this page I got my awesome idea: https://www.twiddy.com/outer-banks/vacation-rentals/

Their bullet points are stylized in such a unique and slick way, and I had to create something similar 🙂