[Tutorial] How to Change Colour Of Bullet Points Using CSS - Web Designing Tuts

Basically,When we try to add bullet points using html codes(i.e,Unordered Lists),they are displayed in black color.So how to Change color of bullet points.We have a Css trick for it !

<ul>
    <li><span>one</span>
    </li>
    <li><span>one</span>
    </li>
    <li><span>one</span>
    </li>
    <li><span>one</span>
    </li>
</ul>

Applying CSS for Above Unordered Lists :

ul {
    list-style-type: square;
    list-style-position: outside;
    list-style-image: none;
    color:#f00;
}
li {
    color:#f00;
}
li span {
    color:#999;
}

And Here is the Output after Applying the above CSS Code :

• one
• one
• one
• one

Note :
You can Change  list-style-type: to Circle etc to Get Bullets Shape of Your Choice..

Eg for list-style-type:circle

• one
• one
• one
• one

Hope You Liked This Tutorial,Stay Tuned for More..Still Any Doubts..Feel Free to Post Comments below..