Watch Custom List Bullets in CSS

Posted on
6,197 Points
Last Modified:
Experience Level: Beginner
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS.

Video Steps

1. Begin with a normal unordered list; the default bullet point is a solid circle

2. In the CSS, create a defined class of unordered list by typing "ul.Square"

3. Define the shape of the custom bullet point by using the "list-style-type:" property. For a square bullet point, define the property as "square"; you can also type "disc" for a hollow circle

4. To set an image as your bullet point, use the "list-style-image:" property. Set the image using url('Image.PNG'); format


Suggested Videos

Title Views Activity
Navigation Hover Effects with CSS Sprites 301
Alpha Transparency in CSS 94
Corner Ribbon Effect in CSS 329
Drop-Cap Effect in CSS 87
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month