Thursday, 26 June 2014

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

Add to Flipboard Magazine.

Advertisement

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 !

How to Change Colour Of Bullet Points Using CSS - Web Designing

<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..

Loved this Post ? Pls Share It Now - Leave A Comment


Note : All Comments are Manually Approved Before they are published .

Related Posts Plugin for WordPress, Blogger...