Thursday, 26 June 2014

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



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

Sponsored :

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