2012-05-29

Changing the color of HTML un ordered list.

It’s a hot topic among web developers that is it possible to change the color of HTML bulletin list? Well, as many says, it’s impossible, there is a very simple way to deal with it. Following is the full code to change the size and change the color.

<ul style="font-size:20px">
<li style="color:Red" ><span style="color:Black; font-size:12px">1</span></li>
</ul>

Let’s see one by one what exactly the code do.

<ul style="font-size:20px">

By setting the font-size for the whole list you can change the size of the bullet. It applies for both text and the bullet. So later, we have to include the text within a span tag and define the style for the text itself.

<li style="color:Red" >

By setting the color, you can specify what color the bullet should take.

<span style="color:Black; font-size:12px">

Since the color and font-size applies for the text also, you need to include the text within span tags to separate it from the bullets so you can specify a separate style for the text.

I tested it with latest FF, IE and Chrome web browsers and it works like a charm!

No comments: