by in Developer Notes

A client asked us to design an ordered list that the dots were blue squares and the text was black. We looked through several examples some using special characters or graphics to replace the dot but we wanted to keep the unordered list structure intact. So we found an answer via Below is how we created the list with blue square dots and black text. We used a custom class so that all of the lists on our webpage (especially navigation) didn’t get the styling.


<ul class=”staff”>
<li><span class=”blacktext”> Here is some Text </span></li>
<li><span class=”blacktext”> Here is some Text </span></li>
<li><span class=”blacktext”> Here is some Text </span></li>


ul.staff li {list-style: square; color: #004C94; padding: 0px 10px 10px 10px; font-size: 14px;}

.blacktext {color:black}

One Response to “Create unordered and ordered lists that have different colored “dots””

  1. mm

    Dana Hutchins

    Hey Leon! We set up this Developer Notes blog for our own reference, and I wanted to note that I reviewed this post for another project we are working on. Important to note that sometimes your most important audience for a blog is yourself!

Leave a Reply

You must be logged in to post a comment.

Example of Bulleted List with Different Colored Bullets

About Leon Rainbow

Leon is primary lead for Inforest Communications graphic and Web design services. He has over ten years experience in Web design and development and is proficient working with open­source CMS systems. He holds an associates degree in Computer Graphics from Mercer County Community College. Leon Rainbow is also a well known artist in Mercer County who creatively combines graffiti, street art and other artistic forms into innovative projects and events. He reaches out to wide audience, from galleries to the walls of inner cities. Leon curates two annual art festivals in New Jersey for area painters and the community as well as dedicating his civic duty to teaching after­school art programs in Trenton and Princeton, NJ.