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}