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

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 http://www.echoecho.com/csslists.htm. 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.

HTML

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

CSS

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

.blacktext {color:black}

One comment on “Create unordered and ordered lists that have different colored “dots””

  • 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!

Comments are closed.