Bullet points and numbers are displayed by default in the same font style as the text inside. Now if you want special style for those elements you will need to tweak them a little bit. The solution shown below use an extra <p> tag in your <li> to override the list style on the text. Let’s have a look at the example:

Basic ordered list:

<ol>
<li>An element</li>
<li>An other element</li>
<li>Yet a different element</li>
</ol>

The code above displays:

1. An element
2. An other element
3. Yet a different element

Styled unordered list:

<ol>
<li><p>An element</p></li>
<li><p>An other element</p></li>
<li><p>Yet a different element</p></li>
</ol>

and a bit of CSS:

ol{
color:red;
font-family:times;
font-size:1.5em;
}
ol p{
color:#fff;
font-family:helvetica;
font-size:0.8em;
}

displays:

1. An element

2. An other element

3. Yet a different element

The technique works for unordered list as well. You can now make very unique list matching your website design perfectly.